Viewport Units (vw / vh / dvh)
Viewport units (vw, vh, vmin, vmax, plus modern dvh / svh / lvh) size CSS properties relative to the viewport — useful for responsive hero sections, full-bleed elements, and fluid typography.
In context
Classic vh has long had a mobile annoyance: it sizes against the largest viewport (with browser chrome hidden) so a 100vh hero overflows when the address bar is visible. Modern CSS introduced dvh (dynamic viewport height — accounts for current chrome state) and svh (smallest) and lvh (largest) — use dvh for hero sections that should fill the visible viewport regardless of browser chrome state. Browser support is widespread in 2026.
A Canadian publisher's hero section using 100vh caused mobile content to scroll below the fold; switching to 100dvh made the hero fit the visible viewport on iOS Safari with the address bar visible.
Have a question this didn't answer?
Book a free 60-minute strategy call. We'll explain how this concept applies to your specific situation.