Если вы попытаетесь установить высоту контейнера <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>