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

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: