If you try to set the height of a container div to 100% of the browser window using the height of the style rule: 100%; it does not work because the percentage (%) is a relative unit, so the resulting height depends on the height of the parent element.
For example, if you consider the following example, div . container has two parent elements: the element and the . And we all know that the default value of the height property is automatic. Therefore, if we also define the height of the elements and as 100%, the resulting height of the container div will become equal to the 100% height of the browser window element.
<!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: #f0e68c;
}
</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>