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

📣 Sponsor

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.

Last Updated 1657047786111

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

📣 Sponsor

How to make a div the same height as the window

More Tips and Tricks for CSS

Subscribe for Weekly Dev Tips