How to make a div the same height as the browser window

You might think that making a div element the same height as your browser would be as easy as this:

div {
    height: 100%;
}

However, it is unfortunately not. If you’re wondering why height: 100%; doesn't work to make an element the full height of the screen, it's because a height has to be defined to use percentages in CSS. Since body tags have no predefined heights, CSS doesn't know what 100% means here. So the div element doesn't become 100% of the browser's height.

How to make a div the same height as the window

Making a div the same height as your browser window is relatively straight forward, and it starts with understanding a unit called vh. vh, which stands for viewport height, is a unit representing the current height of your browser window. 100vh is the full height, and any number less than that is a percentage of that height.

Instead of writing height: 100%, we can apply height: 100vh to any element to make it the same size as the browser window.

div {
    height: 100vh;
}

It also works for 100vw, which represents the full width of the browser window, vw standing for viewport width.

Level Up Coding

Thanks for being a part of our community! More content in the Level Up Coding publication.
Follow: Twitter, LinkedIn, Newsletter
Level Up is transforming tech recruiting ➡️ Join our talent collective