Full Height Div in CSS

In this article, I’ll show you how to make the div the same height as the browser window in an easy and perfect way.

You might have thought that making a div element the same height as the browser would be just like this:

.div{
  height: 100%;
} 

Unfortunately, you cannot use height: 100%; to make a div fill the entire screen because a height must be defined in order to use percentages in CSS. CSS is unsure what 100% means because body tags have no predefined heights. As a result, the div element does not fill the entire width of the browser.

Here’s the live demo for it:

See the Pen by Dhairya Shah (@dhairyathedev) on CodePen.

Here, in the above CodePen, you can open the CSS tab and compare the background color that hasn’t changed in the output.

So, how to make a div the same height as the browser window

Instead of height: 100%; we need to use height: 100vh; which defines the full height of the browser window.

.div {
  height: 100vh;
}

Check the following CodePen where you can notice the difference:

See the Pen by Dhairya Shah (@dhairyathedev) on CodePen.

So, this is how you make the div the same height as the browser.

Thanks for reading

Follow me on Twitter

Thanks for reading!