EN
CSS - set 100% body height (match to window height)
4
points
In this article, we would like to show how to stretch body element to 100% height using CSS.
Note: it is required to set
height: 100%forhtmlandbodyelements to stretch body to window height.
Quick solution:
<!doctype html>
<html>
<head>
<style>
html, body { /* <-------------------- required html & body */
height: 100%; /* <--------------- required */
}
</style>
</head>
<body>
Body here ...
</body>
</html>
Practical example
The solution presented in this section shows nested div in body element that is stretched to body that has 100% width and height.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
html, body { /* <-------------------- required html & body */
height: 100%; /* <--------------- required */
}
body {
margin: 0;
}
div.layout {
background: gold;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="layout">
Layout ...
</div>
</body>
</html>
Screenshot:
