vh, dvh, svh, ldvh — Новые велечины для улучшения верстки

Мне кажется, что каждый либо уже сталкивался, либо еще столкнётся с очень интересной проблемой связанной с адресной строкой браузера на мобильных телефонах. Не особо понятно, как ведет себя внутренняя высота экрана и блоки, у которых высота указана в 100vh.

В этой статье мы постараемся подробно разобраться за вас и помочь вам, чтобы это перестало быть проблемой.

vh — Viewport Height

Определение

Viewport Height (vh) — это процентная величина от общей высоты области просмотра. К примеру, 10vh составляет 10% от текущей высоты области просмотра.

Поддержка у vh отличная, добавлена она в спецификации CSS3 (~2011г.)

Одной из особенностей этой единицы измерения, заключается в том, что элемент, которому задана высота в единицах vh, заходит за адресную строку.

Изначальная позиция	Прокрученная позиция

При этом, эта же особенность становится проблемой в тот момент, когда вам нужно разрабатывать сайт one-screen — весь контент должен быть на одном экране и без скрола.

lvh — Large Viewport Height

Определение

Large Viewport Height (lvh) — это процентная величина от максимальной высоты области просмотра.

Что же значит "максимальной высоты области просмотра"? Это значит то, что относительная единица lvh рассчитывается от высоты экрана, когда все доступные элементы интерфейса браузера либо скрыты, либо уменьшены, в зависимости от того, как браузер "избавляется" от них.

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

Изначальная позиция	Прокрученная позиция

По сути, в данный момент lvh работает также как vh.

svh — Small Viewport Height

Определение

Small Viewport Height (svh) — это процентная величина от минимальной высоты области просмотра.

Единица измерения svh рассчитывается ровно противоположно тому, как рассчитывается lvh, т.е. учитывает динамические элементы интерфейса браузера, независимо от того, скрыты ли они в момент загрузки страницы.

Изначальная позиция	Прокрученная позиция

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

dvh — Dynamic Viewport Height

Определение

Dynamic Viewport Height (dvh) — это процентная величина от текущей высоты области просмотра.

Единица dvh рассчитывается с учетом динамических элементов интерфейса браузера. Т.е. когда элементы видны, dvh ведет себя как svh, а когда у браузера убраны динамические элементы, как lvh.