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

vh — Viewport Height

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

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

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

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

lvh — Large Viewport Height

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

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

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

svh — Small Viewport Height​

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

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

dvh — Dynamic Viewport Height

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

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

Поддержка

Поддержка у выше перечисленных единиц измерения довольно маленькая, т.к. находятся в стадии разработки в спецификации CSS4.