Why can't height be set with this CSS variable?

[Shikkediel]

I recently discovered there is by now good support for CSS variables and was trying to solve an “age old” problem of accounting for the scrollbar when using viewport units.

Rejoicing after seeing that this actually calculates the scrollbar width:

:root {
  --bar: calc(100vw - 100%);
}

It also works later on in the style to make an element half the available screen width:

div {
  width: calc(50vw - var(--bar) / 2);
}

But to my surprise it is not possible to set the height with the variable…

codepen.io/anon/pen/pYGVRz

The blue div clearly has the right width, noticeable because it has a fixed height. But there should be a red div on the left, as high as the scrollbar is wide. But its height is zero. If you change the variable at the top to an amount of pixels, it does have an effect.

Anybody have an idea as to why?

[Shikkediel]

I don’t think it works how I thought it would. :-(

It doesn’t calculate a fixed value at root level but the 100% literally translates through to the child using it. So the variable simply boils down to giving the div a width of 100%. Doesn’t actually calculate the scrollbar. Bummer.

Likely too why height can’t be set (it would use 100% of the height). I’m too JS minded.

[Shikkediel]

It one could force a calculation on any level (it would have to at some point anyway) instead of basically passing down a string, now that would be useful. Something like this:

--bar: calc(100vw - 100%)();

How ridiculous is it that there is still no universal CSS way to target scrollbars by the way…

[Author]

Posts