Styling HTML and BODY selector to height: 100%; vs using 100vh

Question

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..?\"

<

Answer 1

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

Answer 2

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/

Answer 3

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: