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

• What are Variable Fonts in CSS, and How to Use Them
• CSS 3d Mosaic Parallax Effect
• How to Create Animated Cards with WebGL and Three.js
• CSS Only Masonry Layouts with Grid
• How the CSS Box Model Works
• CSS Colors
• Sticky Positioning with CSS
• Stripe-Like Smooth Transition CSS Only Menu
• How to make a div the same height as the browser window
• Creating 3D CSS Buttons which Move as you Mouse Over