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.