Існує пара одиниць вимірювання CSS 3 під назвою:
Що таке тривалість перегляду в процентному відношенні?
Із наведеної вище рекомендації щодо кандидата W3:
Довжина перегляду в процентному співвідношенні відносно розміру початкового блоку, що містить. При зміні висоти або ширини початкового блоку вони відповідно змінюються.
Такими одиницями є vh
(висота вікна перегляду), vw
(ширина вікна перегляду), vmin
(мінімальна довжина вікна перегляду) та vmax
(максимальна довжина вікна перегляду).
Як це можна використовувати, щоб роздільник заповнив висоту браузера?
Для цього питання ми можемо скористатися vh
: 1vh
дорівнює 1% висоти вікна перегляду. Тобто 100vh
дорівнює висоті вікна браузера, незалежно від того, де елемент знаходиться у дереві DOM:
HTML
<div></div>
CSS
div {
height: 100vh;
}
Це буквально все, що потрібно. Ось приклад використання цього JSFiddle .
Які браузери підтримують ці нові блоки?
Наразі це підтримується у всіх сучасних основних браузерах, крім Opera Mini. Перевірте Чи можна використовувати ... для подальшої підтримки.
Як це можна використовувати з кількома стовпцями?
У випадку порушеного питання, що містить лівий і правий роздільник, ось приклад JSFiddle, що показує макет з двома стовпцями, що включає обидва vh
та vw
.
Як 100vh
відрізняється 100%
?
Візьмемо для прикладу цей макет:
<body style="height:100%">
<div style="height:200px">
<p style="height:100%; display:block;">Hello, world!</p>
</div>
</body>
p
Тег тут встановлений на 100% висоти, а тому , що вона містить div
має висоту 200 пікселів, 100% 200 пікселів стає 200 пікселів, а НЕ 100% від body
висоти. Використання 100vh
натомість означає, що p
тег становитиме 100% висоту body
незалежно від div
висоти. Погляньте на цей супровідний JSFiddle, щоб легко побачити різницю!