Hello Readers!
Ever wanted to make a div stretch vertically according to the browser window's height?
One solution that instantly appears into our mind is height:100%. But this doesn't work as desired. The reason being % a relative unit. So when we give 100% height to a div element, it takes up all the height of its parent element. That surely is, 100% height.
So, how do we solve this? html and body are parent elements for all other elements, and the default value for these is height:auto;, so we change the height for both of them to 100% and same for the div element that we want to stretch.
The code will explain you better.
HTML :
<body>
<div class="container">The height of this DIV element is 100% of the browser's window.</div>
</body>
CSS :
html, body {
height: 100%;
margin: 0px;
}
.container {
height: 100%;
background: #f0e68c;
text-align:center;
}
Try this and you will find the height of your div element is equal to the height of the browser window.
Well, there are some new CSS3 recommendations for this. We have a new unit 'Viewport-height' (vh).
1 vh= 1%
Thus, 100 vh= 100%
Hence, 100vh is equal to the height of the browser window.
div {
height:100vh;
}
Happy Coding!
0 Comment(s)