Что такое svh, lvh, dvh в CSS

Проблема с vh на мобильных

Классическая единица 100vh давно страдает от одной известной проблемы: мобильные браузеры (Chrome, Safari) динамически скрывают/показывают адресную строку при прокрутке. При этом vh не пересчитывается — он остаётся зафиксированным на одном из крайних значений, из-за чего контент либо обрезается, либо появляется скролл там, где его не должно быть.

CSS Level 4 ввёл три новые единицы для точного контроля над этим поведением.

Три новые единицы

Визуализация

┌────────────────────────┐   ← lvh (адресная строка скрыта)
│                        │
│      Контент           │
│                        │
├────────────────────────┤   ← svh (адресная строка видна)
│   [адресная строка]    │
└────────────────────────┘

• 100svh — высота с учётом, что адресная строка всегда занимает место
• 100lvh — высота при полностью скрытом UI браузера
• 100dvh — живая высота, меняется при скролле

Когда что использовать

svh — безопасная высота

Подходит для фиксированных элементов, которые должны быть всегда видны без скролла — например, модальные окна, полноэкранные карточки:

.modal {
  height: 100svh; /* гарантированно влезет, даже с адресной строкой */
}

lvh — максимальная высота

Используется когда хочется занять всё доступное пространство при скрытой навигации — hero-секции, полноэкранные баннеры:

.hero {
  min-height: 100lvh;
}

dvh — динамическая высота

Реагирует на реальное состояние браузера в данный момент. Удобно для sticky-элементов и интерактивных лейаутов, но вызывает repaint при скролле:

.sticky-panel {
  height: 100dvh; /* обновляется при изменении размера viewport */
}

Сравнение с классическим vh

Аналогичные единицы для ширины

Те же три варианта существуют для ширины и комбинированных единиц:

svw, lvw, dvw   — ширина
svi, lvi, dvi   — inline (горизонталь в LTR)
svb, lvb, dvb   — block (вертикаль в LTR)
svmin, lvmin, dvmin
svmax, lvmax, dvmax

Поддержка браузерами

Все три единицы поддерживаются во всех современных браузерах начиная с 2022–2023 года:

• Chrome 108+
• Safari 15.4+
• Firefox 101+