Если вы попытаетесь установить высоту контейнера <div> на 100% от окна браузера, используя правило height: 100%; оно не сработает, потому что процент (%) — это относительная единица, которая зависит от высоты родительского элемента.
Для решения вашей задачи необходимо установить 100% высоту и для родительских элементов.
Например, рассмотрим следующий пример, div.container имеет два родительских элемента: <body> и <html>, а значение свойства height по умолчанию — auto. Поэтому, если мы также установим высоту элементов <body> и <html> на 100%, результирующая высота контейнера div станет равной 100% высоте окна браузера.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set DIV Height to 100% Using CSS</title>
<style>
html, body {
height: 100%;
margin: 0px;
}
.container {
height: 100%;
background: #f0e68c;
}
</style>
</head>
<body>
<div class="container">Высота этого элемента div равна 100% высоте его родительского элемента.</div>
</body>
</html>
