html tutorial - How to set the height of a div to 100% using CSS - html5 - html code - html form
Answer: Set the style rule "height:100%;" for parents too
If you'll attempt the set the peak of container div to 100 percent of the browser window using height: 100%; it does not work, as a result of the percentage (%) may be a relative unit that the ensuing height is depends on the peak of parent element's height.
The container div has two parent elements: <body> and <html> (according to the example source code). We all know the default value of height property is auto, so if we also set the height of <body> and <html> element to 100% the resulting height of container div becomes equal the 100% height of the browser window.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set DIV Height to 100% Using CSS</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0px;
}
.container {
height: 100%;
background: #ffc0cb;
}
</style>
</head>
<body>
<div class="container">The height of this DIV element is equal to the 100% height of its parent element's height.</div>
</body>
</html>