Коротко: растянуть блок на весь экран в CSS можно через height: 100vh (высота окна), min-height: 100vh (не меньше экрана), width: 100vw (на всю ширину окна) или «full-bleed» — выйти за границы контейнера отрицательными отступами. Для корректной работы нужна высота у html и body.
vh/vw есть подводные камни на мобильных.Единицы и их смысл
| Единица | Что означает |
|---|---|
100vh |
высота окна (viewport) |
100vw |
ширина окна |
100% |
от высоты/ширины родителя |
100dvh |
динамическая высота (учитывает панели браузера) |
Вкладки: способы растянуть
.hero {
min-height: 100vh;
display: grid;
place-items: center;
}min-height: 100vh — блок не меньше экрана, но может вырасти, если контента больше. Это безопаснее, чем height: 100vh, который обрежет содержимое.
html, body { height: 100%; margin: 0; }
.full { height: 100%; }100% берёт высоту родителя, поэтому без высоты у html и body не работает. Используйте, когда нужно растянуть блок внутри контейнера.
«Full-bleed» — растянуть секцию шире контейнера, оставаясь в его разметке:
.bleed {
width: 100vw;
margin-left: calc(50% - 50vw);
}Приём для картинок и фонов на всю ширину. Осторожно: 100vw включает ширину скроллбара и может вызвать горизонтальную прокрутку.
.overlay {
position: fixed;
inset: 0; /* top/right/bottom/left = 0 */
background: rgba(0,0,0,.6);
}Полное перекрытие окна для меню и модальных окон. inset: 0 растягивает элемент по всем сторонам.
100vh даёт полосу прокрутки. Решение — 100dvh (динамическая высота) или min-height: 100svh (малая стабильная высота).Практика: секция на всю высоту
- Секции задайте
min-height: 100vh(или100dvh). - Внутри — flex/grid для центрирования контента.
- Уберите отступы у
body. - Проверьте на реальном телефоне: нет ли «двойной» прокрутки.
- Для фона-картинки добавьте
background-size: cover.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| 100% не работает | нет высоты у родителей | задать height: 100% для html/body |
| Горизонтальная прокрутка | 100vw + скроллбар |
использовать calc(100% + …) или overflow-x: hidden |
| Полоса прокрутки на телефоне | 100vh с панелью браузера |
100dvh / 100svh |
| Контент обрезан | height: 100vh фиксированный |
min-height вместо height |
Проверьте себя
Вопросы и ответы
100% считается от высоты родителя. Если у родителя высота «auto», брать нечего — и блок не растянется. Поэтому задают height: 100% для html и body.
Это «динамическая» и «малая» высоты окна, которые учитывают появление и скрытие интерфейса браузера на мобильных. Решают проблему полосы прокрутки от 100vh.
Задайте блоку min-height: 100vh и background: url(...) center / cover no-repeat;.
Не используйте 100vw для блоков внутри контейнера. Если нужно — overflow-x: hidden у родителя, но лучше пересмотреть приём.
Итоги
- Высота во весь экран —
min-height: 100vh(лучше100dvh). 100%требует высоты у родителей.- Full-bleed —
100vw+ отрицательные отступы, осторожно с прокруткой. - Полное перекрытие окна —
position: fixed; inset: 0.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.