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:
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
html, body { /* <-------------------- required html & body */7
height: 100%; /* <--------------- required */8
}9
10
</style>11
</head>12
<body>13
Body here ...14
</body>15
</html>
The solution presented in this section shows nested div in body element that is stretched to body that has 100% width and height.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
html, body { /* <-------------------- required html & body */7
height: 100%; /* <--------------- required */8
}9
10
body {11
margin: 0;12
}13
14
div.layout {15
background: gold;16
width: 100%;17
height: 100%;18
}19
20
</style>21
</head>22
<body>23
<div class="layout">24
Layout ...25
</div>26
</body>27
</html>Screenshot:
