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:

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:

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

Thanks for reading

Follow me on Twitter

Thanks for reading!