Чем отличаются единицы vh, svh, lvh и dvh?

Эти единицы описывают высоту окна, но по-разному учитывают динамические панели мобильных браузеров (адресная строка, нижние кнопки).

Различия

• `vh` — 1% высоты окна в «обычном» расчёте; на телефоне часто равна максимуму, когда панели скрыты, и контент уходит под них.
• `lvh` (large) — высота при скрытых панелях, самый большой вариант.
• `svh` (small) — высота при показанных панелях, самый маленький вариант.
• `dvh` (dynamic) — меняется вместе с появлением и исчезновением панелей.

.hero {
  min-height: 100vh;   /* запасной вариант для старых браузеров */
  min-height: 100dvh;  /* точная высота видимой области */
}

Когда что

• 100svh — чтобы блок гарантированно помещался на экран.
• 100dvh — для полноэкранных разделов, когда нужно использовать всё видимое место. Пересчёт при прокрутке может вызывать перерисовку.

Коротко для собеседования

На мобильных 100vh может быть больше видимой области. Для надёжной раскладки выбирают svh или dvh.