Viewport Height Units

These units all represent a percentage of the viewport height, but they differ in which viewport they use as reference — especially on mobile where the browser's address bar shows and hides as you scroll.

vh — legacy. Historically inconsistent on mobile (browser-defined). Today most browsers treat it like lvh.
lvh — large viewport height: measured when browser UI (address bar) is hidden (the largest the viewport gets).
svh — small viewport height: measured when browser UI is visible (the smallest the viewport gets).
dvh — dynamic viewport height: updates live as the browser UI shows/hides. Always fills exactly the visible area.

On desktop there is no collapsing browser UI, so all four units are identical. Open this on mobile and scroll to see the difference.

100vh

Reference: legacy / usually same as lvh today

100lvh

Reference: largest viewport (address bar hidden)

100svh

Reference: smallest viewport (address bar visible) — always safe

100dvh

Reference: live, updates as UI shows/hides — can cause reflow

When to use which

dvh: Full-screen overlays, modals, drawers — you want to exactly fill the visible area, and reflow on scroll is acceptable.
svh: Hero sections, page headers — safe because it never overflows even when the address bar is visible. No reflow.
lvh: Decorative / background elements where overflowing slightly behind the address bar is fine.
vh: Avoid on mobile-first projects. Fine on desktop-only pages. Behaves like lvh in modern browsers.

Scroll area — gives the page enough content so the mobile browser hides its address bar and you can observe dvh vs lvh vs svh in action.