Коротко: чтобы растянуть блок на весь экран, задают width: 100% и height: 100vh (или min-height: 100vh). Для фона на всю страницу достаточно min-height: 100vh у секции. Абсолютный оверлей растягивают через position: fixed; inset: 0.
vh и % избавляет от «пустых полос» и обрезанного контента.Способы растянуть
| Задача | Способ |
|---|---|
| Секция во всю ширину | width: 100% |
| Секция во всю высоту экрана | min-height: 100vh |
| Фон на всю страницу | min-height: 100vh у body |
| Оверлей поверх всего | position: fixed; inset: 0 |
Единицы высоты
.screen {
width: 100%;
min-height: 100vh; /* высота окна браузера */
}
body {
margin: 0;
min-height: 100dvh; /* корректно на мобильных */
}100vh — высота окна браузера. На мобильных панели адреса меняют её динамически, поэтому появилась единица dvh: она учитывает реально видимую высоту.
Вкладки: три сценария
.hero {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #003F8F;
color: #fff;
}Полноэкранная секция с контентом по центру. min-height лучше height — если текста много, блок растянется и ничего не обрежется.
.overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.6);
z-index: 1000;
}inset: 0 растягивает элемент до всех четырёх краёв окна. Плюс z-index, чтобы оверлей был поверх контента.
html, body { height: 100%; }
body {
min-height: 100dvh;
background: url("bg.jpg") center / cover no-repeat;
}Фон на всей странице: растяните html и body, задайте cover. Тогда картинка закроет экран целиком.
height: 100% у блока не работает, если у родителя высота не задана. В этом случае используйте vh/dvh или задайте высоту родителю. Также помните про margin: 0 у body — иначе по краям останутся полосы.Практика: растянуть секцию на экран
- Задайте блоку
width: 100%. - Для высоты используйте
min-height: 100vh. - Уберите отступы у
body. - Отцентрируйте содержимое через flex, если нужно.
- Замените
vhнаdvhдля мобильных. - Проверьте, что на маленьком экране контент не обрезается.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| По краям белые полосы | отступы у body |
margin: 0 |
height: 100% не работает |
нет высоты у родителя | vh или высота родителю |
| Секция обрезается | height вместо min-height |
заменить на min-height |
| Прыгает высота на телефоне | единица vh |
использовать dvh |
| Оверлей под контентом | нет z-index |
задать z-index |
Проверьте себя
inset: 0?
Вопросы и ответы
vh считается от высоты окна браузера и не зависит от родителя. % зависит от высоты родителя, и если она не задана, результат будет нулевым.
Из-за 100vw: ширина окна считается вместе с полосой прокрутки, и блок становится шире экрана. Используйте width: 100% вместо 100vw.
Для десктопа разницы почти нет. На мобильных лучше dvh — она учитывает динамическую панель адреса и блок не «прыгает» при прокрутке.
Растяните секцию на min-height: 100vh и задайте background-size: cover с background-position: center. Картинка закроет экран без полей.
Итоги
- Ширина —
width: 100%, высота —min-height: 100vh. - Оверлей растягивают через
position: fixed; inset: 0. height: 100%работает только при высоте у родителя.- На мобильных используйте
dvhвместоvh.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.