How to prevent vh-units from ignoring the scrollbar?

css units-of-measurement viewport-units
Afterlame picture Afterlame · Oct 29, 2013 · Viewed 12.9k times · Source

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

mirichan picture mirichan · Oct 16, 2014

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;
}

Related questions

Why em instead of px?

I heard you should define sizes and distances in your stylesheet with em instead of in pixels. So the question is why should I use em instead of px when defining styles in css? Is there a good example that …

Read More
Should I use px or rem value units in my CSS?

I am designing a new website and I want it to be compatible with as much browsers and browser settings as possible. I am trying to decide what unit of measurement I should use for the sizes of my fonts …

Read More
How to set the maximum width of a column in CSS Grid Layout?

What I want to achieve: Using CSS Grid Layout, to have a page with a right column which size is derived from its content, but only up to 20% of the window width. How I thought it would work: It looks …

Read More