Viewport Units: vw, vh, svh, dvh

What Viewport Units Are

Viewport units size an element relative to the browser's visible window rather than to a parent element. 1vw equals 1% of the viewport's width, and 1vh equals 1% of the viewport's height.

.hero {
  height: 100vh; /* fills the full visible height */
  font-size: 5vw; /* text scales with window width */
}

The Problem with vh on Mobile

On mobile browsers, the address bar can appear and disappear as a user scrolls, which changes how much space is actually visible. Traditional vh is calculated against the largest possible viewport, so height: 100vh can end up taller than what is actually visible, hiding content behind the browser's UI.

svh and dvh: The Modern Fix

.full-screen-section {
  height: 100dvh; /* adjusts as the address bar appears/disappears */
}

Practical Guidance

For a full-height hero section or modal on mobile, dvh usually gives the most accurate result. It is still sensible to provide a vh fallback for older browsers that do not yet support the newer units.