🦢 SVH или DVH: что юзать в мобильных адаптивах?
⠀
На десктопе собрать полноэкранный блок проще простого. Ставим 100vh — и готово, секция занимает весь монитор. На мобилках эта магия ломается: в игру вступают адресная строка, нижняя навигация и другие панели браузера.
⠀
👨‍💻 Как работает 100svh?
Единица считается от минимальной высоты экрана, когда все панели открыты. Блок аккуратно встаёт в видимую зону, а контент не прячется под интерфейсом браузера.
⠀
Но есть подвох. При скролле панели исчезают, экран становится больше, а высота блока остаётся прежней. По итогу снизу может появиться пустота.
⠀
⚡️ Что происходит с 100dvh?
Здесь всё работает в динамике. Панели ушли — блок вытянулся. Вернулись — сжался. Топ для секций, которые должны всегда занимать всю доступную высоту экрана.
⠀
Но и тут не всё так сладко. Браузер постоянно пересчитывает высоту, поэтому контент может дёргаться и смещаться прямо во время скролла.
⠀
Что ставить на практике:
• svh — берём ради стабильной высоты, когда важно показать весь контент;
• dvh — юзаем, если блок должен чётко заполнять текущую видимую зону;
• vh — оставляем запасным значением, если небольшой заезд контента под панели не критичен.
⠀
Например, svh отлично встанет на экран с важной кнопкой внизу. А dvh — топ для обложки или визуальной секции, которая всегда должна занимать 100% экрана.
⠀
🖥 Height или min-height?
Для обычных секций чаще лучше юзать min-height, а не жёсткий height.
⠀
При height: 100svh блок фиксируется наглухо. Добавили больше текста, включили локализацию или открыли сайт на слишком низком экране — контент вывалился за границы.
⠀
min-height: 100svh задаёт нужную базу, но не мешает секции расти вместе с контентом. Жёсткий height оставляем только там, где объём контента полностью контролируется.
⠀
💡 По итогу
Главная ошибка — искать одну волшебную единицу под весь адаптив. Её нет.
⠀
На одной странице абсолютно нормально миксовать svh для стабильного интерфейса и dvh для полноэкранных секций. Сначала решаем, как должен вести себя конкретный блок, и только потом выбираем единицу. Без магии и костылей — чисто под задачу.