18

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?

Stephan Muller
  • 27,018
  • 16
  • 85
  • 126
Afterlame
  • 1,188
  • 2
  • 13
  • 32
  • 2
    How about `.panel { height: calc(100vh-17px); }`. I don't know how big the scroll bar is and if this is browser/OS dependent. – kleinfreund Oct 29 '13 at 20:08
  • @kleinfreund I tried this before with latest Chrome and Safari versions. Both give me `Unexpected CSS token: )`. And still, there would be the problem with the unknown scrollbar height, as you mentioned before. – Afterlame Oct 29 '13 at 20:16
  • Then you may want to rely on Javascript and calculate the _actual_ height of your scrollbar. But I'm sure you want a good css-based solutions, which would be preferable. And yes, I googled and viewport units and calc() are not really working atm. – kleinfreund Oct 29 '13 at 20:20
  • Yes, I would like to avoid using JS wherever possible. As a CSS based solution `html, body, .content { height: 100%; }` seems to work for now, but any good solution for using `vh` would be appreciated. – Afterlame Oct 29 '13 at 20:29
  • VH units are technically working correctly, they fill the full height of the viewport. To avoid the scrollbar problem you have two options, #1 use 100% height (which might be a pain), or #3 use calc to subtract the width of the scrollbar out (10px). Ex: calc(100vw - 10px), however this solution doesn't work in Webkit. –  Nov 12 '13 at 21:15
  • 4
    Your use case was discussed and resolved here: http://lists.w3.org/Archives/Public/www-style/2013Jan/0616.html. If you define `overflow-x: scroll;` on the root element, this will deduct the scrollbar height from the viewport height. It'd also work horizontally but the massive problem with this is that it's currently only supported in Firefox. – Matt Kieran Nov 21 '13 at 01:59
  • Bug reports for [Chromium](https://code.google.com/p/chromium/issues/detail?id=377331) and [Webkit](https://bugs.webkit.org/show_bug.cgi?id=133271) – Tamlyn Feb 16 '15 at 11:01

1 Answers1

5

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;
}
mirichan
  • 1,370
  • 1
  • 12
  • 25
  • I don't see pros in using cover with overflow hidden. You then just can set height: 100% to #container, not 100vh. – a.s.panchenko Jan 25 '15 at 11:54
  • 1
    I agree that 100vh is unnecessary and hinted as much in my answer, but the question was about viewport units specifically. – mirichan Jan 25 '15 at 13:57