How to prevent vh-units from ignoring the scrollbar?

Question

I am working on a page layout with a horizontal scrollbar. I have some panels with fixed widths in a horizontal order, which should all have the viewport height. I decided to test the vh unit to do that.

.panel { height: 100vh; }

This is working fine, until I get a scrollbar. The problem is, that vh ignores the height used by the scrollbar and therefore adds a vertical scrollbar.

I would like to subtract the height of the scrollbar from the measurements of vh; is there any way to do this?

Answer 1

You could use a parent element with overflow-y: hidden to ensure that you don't get a vertical scrollbar and then safely use 100vh inside it. This is assuming that you do actually need 100vh for some reason and don't just need to fill the vertical space.

HTML

<div id="main">
  <div id="container"></div>
</div>

CSS

#main {
  width:200vw;
  height:100%;
  background: red;
  position: absolute;
  overflow-y: hidden;
}

#container {
  height: 100vh;
  width:10px;
  background: blue;
}