How to make a div 100% height of the browser window

div {
    height:100vh;
}

These units are vh (viewport height), vw (viewport width), vmin (viewport minimum length) and vmax (viewport maximum length).

How is 100vh different to 100%?

<body style="height:100%">
    <div style="height:200px">
        <p style="height:100%; display:block;">Hello, world!</p>
    </div>
</body>

The p tag here is set to 100% height, but because its containing div has 200px height, 100% of 200px becomes 200px, not 100% of the body height. Using 100vh instead means that the p tag will be 100% height of the body regardless of the div height

References
https://stackoverflow.com/questions/1575141/how-to-make-a-div-100-height-of-the-browser-window

Related