CSS

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.

More Tips and Tricks for CSS

• How to vertically center text and HTML elements with CSS
• Updating CSS Variables with Javascript
• CSS Transformations
• How to make a div the same height as the browser window
• CSS Text
• CSS Layers Tutorial: Real CSS Encapsulation
• Parent Selection in CSS: how the CSS has selector works
• Multi colored text in CSS
• A Guide to Level 4 CSS Selectors
• CSS Fonts