🪗 Что такое vh и зачем он нужен?

Если vw работает с шириной, то vh зависит от высоты экрана. Тут всё просто: 1vh равен 1% от высоты окна браузера.

Звучит банально, но в вёрстке без этой единицы никуда. Например, когда нужно растянуть секцию строго на весь экран. Обложки, стартовые заставки, полноэкранные меню или декоративные фоны. Ставим высоту 100vh, и блок уверенно занимает всю видимую область.

Но есть серьезный нюанс. На мобилках с высотой всё намного хитрее. Там постоянно мешает сам браузер со своей адресной строкой и нижней панелью навигации. Эти элементы умеют появляться и исчезать от скролла.

Из-за этого базовые 100vh часто ведут себя криво. Мобильное меню вроде открывается на весь экран, но кусок полезного контента просто прячется под панелью браузера. Высота считается совсем не так, как вы задумывали.

Поэтому для мобильных экранов и важных полноэкранных блоков лучше использовать не обычный vh, а более гибкий dvh.

Классический vh отлично работает для привязки к высоте окна на десктопе. А вот на смартфонах нужно быть внимательнее. Там 100vh далеко не всегда дает идеальное попадание в видимую зону.

По итогу:
vh круто решает задачи с полноэкранными секциями, которые жестко завязаны на высоту монитора. Но при работе с планшетами и мобилками всегда проверяйте поведение на реальных телефонах. Именно там начинается всё самое интересное 😅