Процентное значение для CSS-свойства Height
При использовании пикселей (px) в качестве значений CSS-свойства height, для блочных элементов, никаких отклонений не наблюдается, однако при использовании процентов (%) есть нюансы.
Процентное значение означает, что расчёт высоты будет происходить относительно родительского элемента, поэтому если у родителя явно (px, em и тому подобное) не задана высота, то свойство height будет проигнорировано, так как браузер не сможет вычислить требуемую высоту.
У родительского элемента также может быть задана высота в процентах — в этом случае браузер, чтобы вычислить его высоту, будет брать в расчёт высоту его родительского элемента, то есть родителя родителя.
Цикл вычисления высоты родителя (при указании значения в %) будет продолжаться до корневого элемента — <html>.
Значение высоты блока в процентах
Способ №1 — Корневой элемент
Указываем высоту родительского и корневого элементов.
В данном случае браузер, чтобы определить высоту блока <div>, изначально должен вычислить высоту его родительского элемента — <body>. Однако у <body> высота также задана в процентах, поэтому расчёт переносится на его родителя — <html>, который в свою очередь является корневым элементом.
Способ №2 — Позиционирование
Указываем абсолютное или фиксированное позиционирование блока.