svh, lvh и dvh: высота с учётом интерфейса браузера

Назначение

Разновидности единиц высоты viewport помогают учитывать появление и скрытие браузерных панелей на мобильных устройствах.

Как это работает

svh относится к малому состоянию области просмотра, lvh — к большому, dvh — к динамически изменяемому. Они решают разные задачи: стабильный размер или следование изменяющейся доступной области.

Пример

.screen { min-height: 100vh; min-height: 100svh; padding: 1rem; box-sizing: border-box; }

Что должно получиться

Первое правило служит запасным, второе применяется при поддержке svh. Минимальная высота оставляет блоку возможность расти, поэтому длинное содержимое не обязано обрезаться.

Граница применения и частая ошибка

Не фиксируйте высоту текстового блока одним экраном, если содержимое может вырасти. Используйте минимальную высоту и проверяйте экранную клавиатуру, масштаб и реальные устройства.

Самостоятельная проверка

Откройте учебную страницу на телефоне и сравните изменение панелей при прокрутке. Проверьте, не скачет ли критичное управление и можно ли прочитать длинный текст целиком.

Связанные материалы

• Структура проекта
• Отладка CSS
• Консоль браузера