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!