Se você tentar definir a altura de um contêiner div para 100% da janela do navegador usando a altura da regra de estilo: 100%; não funciona, porque a porcentagem (%) é uma unidade relativa, portanto a altura resultante depende da altura da altura do elemento pai.
Por exemplo, se você considerar o exemplo a seguir, a div .container possui dois elementos pai: o elemento e o . E todos sabemos que o valor padrão da propriedade height é automático. Portanto, se também definirmos a altura dos elementos e como 100%, a altura resultante da div do contêiner se tornará igual à altura de 100% do elemento janela do navegador.
<!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>