CSS. Единицы измерения vh, vw
04.02.2019
Теги: CSS • Web-разработка • Верстка
В CSS3 были добавлены новые относительные единицы измерения vh и vw, которые вычисляются относительно размеров окна браузера. Для настольных компьютеров ширина окна браузера больше ширины области просмотра (добавляется ширина скроллбара), поэтому если для элемента установить ширину 100vw, то он выйдет за пределы html.
| Единица | Описание |
|---|---|
vh |
Эквивалентно 1% высоты окна браузера |
vw |
Эквивалентно 1% ширины окна браузера |
Адаптивное полноэкранное фоновое изображение
Так как ширина элемента, указанная с помощью 100vw, больше ширины области просмотра, то для создания полноэкранных фоновых изображений лучше использовать ширину 100%, которая будет равна ширине корневого элемента html.
.fullscreen-background {
background: url(image.jpg);
background-position: center;
background-size: cover;
width: 100%;
height: 100vh;
}Блок на всю высоту окна браузера
Чтобы сделать блок на всю высоту окна браузера, необходимо задать height: 100% для трёх элементов — html, body и непосредственно для самого блока:
html, body {
height: 100%;
}
section {
height: 100%;
}
Так как процентные размеры вычисляются относительно значений родительских элементов, то необходимо установить соответствующие значения для каждого элемента DOM. Единица измерения vh не требует установки значений по цепочке, так как её значение вычисляется напрямую относительно окна браузера:
section {
height: 100vh;
}Выравнивание элемента по центру страницы
Высоту, заданную с помощью vh, также можно использовать для выравнивания элемента по центру страницы:
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}Теперь любой элемент будет расположен строго по центру без каких-либо дополнительных приёмов.
Поиск: CSS • Web-разработка • Верстка • Высота • Ширина • Окно браузера • ViewPort • Width • Height • Выравнивание