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>