Процентное значение для CSS-свойства Height

При использовании пикселей (px) в качестве значений CSS-свойства height, для блочных элементов, никаких отклонений не наблюдается, однако при использовании процентов (%) есть нюансы.

Процентное значение означает, что расчёт высоты будет происходить относительно родительского элемента, поэтому если у родителя явно (px, em и тому подобное) не задана высота, то свойство height будет проигнорировано, так как браузер не сможет вычислить требуемую высоту.

У родительского элемента также может быть задана высота в процентах — в этом случае браузер, чтобы вычислить его высоту, будет брать в расчёт высоту его родительского элемента, то есть родителя родителя.

Цикл вычисления высоты родителя (при указании значения в %) будет продолжаться до корневого элемента — <html>.

Значение высоты блока в процентах

Способ №1 — Корневой элемент

Указываем высоту родительского и корневого элементов.

В данном случае браузер, чтобы определить высоту блока <div>, изначально должен вычислить высоту его родительского элемента — <body>. Однако у <body> высота также задана в процентах, поэтому расчёт переносится на его родителя — <html>, который в свою очередь является корневым элементом.

Способ №2 — Позиционирование

Указываем абсолютное или фиксированное позиционирование блока.