94

My brother and I were messing around in sublime earlier and he suddenly shout out, "I learned something new!"

A little shocked, I asked, "What's that..?"

He replied, "Viewport height! I started in I.E.6 when it wasn't fully supported and never really looked at it again." He then proceeded to show me.

To which I replied, "I accomplished the same thing here." and showed him another sandbox project I messed around with.

In my project, in the CSS, I wrote

(edit: I edited to put the background color in the div, not the html or body, my mistake)

(jsfiddle http://jsfiddle.net/nvLq8eg9/embedded/result/ )

html, body {
    height: 100%;
}

div {
    height: 100%;
    background: green;
}

his code is, (jsfiddle http://jsfiddle.net/nvLq8eg9/1/embedded/result/ )

div {
    height: 100vh;
    background: green;
}

Both did virtually the same thing. After doing some research on here, it appears as if the commonly run in to issue via the former method is the inability to scroll; however, on my sandbox project I had more content in it and was able to scroll and interact with the website normally.

Neither of us were able to determine what the differences were between both methods. Would anyone on here be able to educate us?

Thank you!

Stephan Muller
  • 27,018
  • 16
  • 85
  • 126
Medri
  • 963
  • 1
  • 7
  • 6
  • 12
    One big advantage of the latter: A height in percentage needs a height set on the parent element as well, whereas `vh` doesn’t, so you can use it “everywhere”, even further down the line within a parent element that doesn’t have a height set or has different height. – CBroe Dec 23 '14 at 01:41
  • @Medri: Did you see this article? http://www.weareconvoy.com/2014/07/css-vw-and-vh-units-are-they-worth-using-yet/ – Grafica Dec 23 '14 at 01:46
  • @CBroe Thanks! We definitely overlooked that. I personally assumed that since the document's HTML and BODY elements would be the primary parents, with their height already set to 100%, it wouldn't matter for any new elements added. It seems as if vh allows for more specific styling instead of a universal catch all. – Medri Dec 23 '14 at 01:59
  • @Grafica I did not, but I am reading it now! – Medri Dec 23 '14 at 02:00

5 Answers5

131

height: 100vh = 100% of the viewport height

height: 100% = 100% of the parent's element height

That is why you need to add height: 100% on html and body, as they don't have a size by default

Something you have to know : if you use % for vertical margin or padding, % will be calculated on the width of the parent element, not the height.

Tip : try using vh and vw units for font size :) I like this one (not supported in some browsers I know) : font-size: calc(.5vh + .5vw); (for example)

See a nice page here for CSS units : http://css-tricks.com/the-lengths-of-css/

sodawillow
  • 12,497
  • 4
  • 34
  • 44
  • 2
    Did you mean "That is why you need to add `height: 100vh` on `html` and `body`"? Otherwise it seems to me that it is 100% of an undefined number. – user14717 Jan 01 '17 at 21:04
  • 1
    @NickThompson no I meant 100%. I'm trying to find out why, but html knows where to find the value. See [this other question](http://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height) – sodawillow Jan 02 '17 at 14:38
  • 1
    That line making the font size depending on both the vw and vh is really helpful – cjsimon Feb 05 '18 at 18:45
  • 1
    Though the answer provides information on the difference of definition, but I think the "right answer" should provide information on the practical difference, i.e is there something I can do with one that I can't with the other, edge cases difference etc. – allan.simon May 04 '18 at 19:57
  • 3
    I read somewhere that `100vh` has problems on mobile devices. Apparently it ignores the address bar in mobile browsers. – J86 Sep 30 '19 at 14:20
  • @J86 Yes, you're right. Took me forever to realize what was the root of my issues on mobile browsers. See here: https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser – JSeligsohn Mar 04 '20 at 15:12
  • 1
    This answer deserves more points! – Haroun Hajem Sep 28 '21 at 15:19
8

It's also worth noting that mobile toolbars are NOT included in the viewport height. Apparently this is by design. (CSS3 100vh not constant in mobile browser) This makes vh and vw frustrating to use for mobile. The worst is when your modal's X button is covered by a mobile toolbar.

You can come across similar problems with scrollbars and body margin/padding in vw. (Difference between Width:100% and width:100vw?)

If you need something to take up the whole viewport height, consider using height:100% (and making sure to set height:100% on both the html and body tags). It is a huge pain as described above, however, if you end up needing to specify height:100% on a long nested chain of elements.

If you don't have a lot of nested elements, using height:100% seems like the way to go. Otherwise, with a lot of nested elements, vh saves you the trouble.

If mobile toolbars are still a relevant problem, then you may need to actively calculate with window.innerHeight.

Grinfish
  • 318
  • 3
  • 7
6

View port units = vw, vh, vmin, and vmax - are based on the size of the browser viewport. Because, their actual size changes depending on the Viewport Size, this makes them great units for responsive design

Note: When dealing with widths, the % unit is more suitable but with heights, the vh unit is better.

the width of the viewport will actually be larger than the width of the html element.

Viewport > html > body

Community
  • 1
  • 1
Mr. Droid
  • 340
  • 4
  • 7
5

height: 100vh = 100% of the viewport height

Technically, this is true, but a better way to think of it is = 100% of the available height.

If you are looking to fill up a div with the available height, that's a mighty useful trick. Before I learned this, I would have to ensure every div from html down to the nested div had a height of 100% which can be tedious and error prone. Instead, I now just use height:100vh on the nested item.

See this gist.run for an example with Bootstrap 4.1:

Greg Gum
  • 33,478
  • 39
  • 162
  • 233
  • This isn't correct. If you stack two divs each with a class that provides 100vh. you'll end up with a page that has a scroll bar, where the lower div is equal to the entire viewport height. https://jsfiddle.net/mikechabot/L3px491b/ – lux Jun 03 '21 at 22:24
  • 1
    Your example is correct. The point I am trying to make is that 100vh is 100% of the available height. So you your sample, you stack two of these, so the top one fills the available height, and then the bottom one duplicates this same height. So you get a vertical scroll bar to fit both of them. – Greg Gum Jun 04 '21 at 17:12
2

This is also interesting:

Here, blue color is for <body> and red is for <html>. If you use 100vh, and then the browser is resized so the content is not visible fully - you get scrollbar. When you scroll, <body> that was 100vh, will stay above and you will see red part of the <html>.

When using 100%, you get <body> covering <html> all the time.

enter image description here

Bojan Vukasovic
  • 2,054
  • 22
  • 43