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:
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
height: 100%; we need to use
height: 100vh; which defines the full height of the browser window.
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!