Если вы используете% height, высота рассчитывается относительно его родительского контейнера. Это часто приводит людей в замешательство, поскольку следующее не может быть разумно рассчитано:
<body>
<div style="height: 100%;">Hello World</div>
</body>
Мы просим браузер отобразить div на "100%", но браузер не может применить этот стиль, поскольку тело не имеет явной высоты.
Чтобы исправить это, вам нужно задать высоту для html и body, как это ...
html, body {
height: 100%;
}
Теперь это дает div для работы высоту, которая по существу будет равна размеру порта просмотра.
Это относится к высоте и минимальной высоте.