Codectionary / Developer documentation / CSS

Viewport Units: vh, vw, dvh

Viewport units are relative to the browser window's dimensions rather than a parent element. vh and vw represent 1% of the viewport height and width respectively. The newer dvh (dynamic viewport height) solves the classic mobile browser problem where vh included space later covered by the address bar.

Syntax

value: Nvh | Nvw | Ndvh | Nsvh | Nlvh;

Examples

Full-Height Sections

A common landing page pattern - a section that fills the screen.

/* Demo setup: sizing, structure or neutral surfaces. */
.preview-viewport{background:linear-gradient(#fef3c7,#fed7aa);color:#431407;box-sizing:border-box;padding:2rem;border:2px solid #b45309}

.hero {
  height: 100vh; /* fills the full viewport height */
  width: 100vw;
}
  1. Viewport units here refer to the iframe viewport, not the entire documentation page.
  2. Both height variants can look identical in a desktop iframe without browser chrome changing size.
  3. A real mobile browser is needed to observe dynamic toolbar behaviour; the preview demonstrates the sizing rules, not a simulated mobile address bar.
HTML used by this example
<section class="hero preview-viewport">This fills one preview viewport.</section>

The Mobile Address Bar Problem, Solved

Why dvh is now preferred over vh on mobile.

/* Demo setup: sizing, structure or neutral surfaces. */
.preview-viewport{background:linear-gradient(#fef3c7,#fed7aa);color:#431407;box-sizing:border-box;padding:2rem;border:2px solid #b45309}

.old-approach {
  height: 100vh; /* on mobile, this can be taller than the VISIBLE area, since vh ignores the collapsing address bar */
}

.modern-approach {
  height: 100dvh; /* dynamic viewport height - adjusts as the browser UI shows/hides */
}
  1. Viewport units here refer to the iframe viewport, not the entire documentation page.
  2. Both height variants can look identical in a desktop iframe without browser chrome changing size.
  3. A real mobile browser is needed to observe dynamic toolbar behaviour; the preview demonstrates the sizing rules, not a simulated mobile address bar.
HTML used by this example
<section class="old-approach preview-viewport">100vh</section><section class="modern-approach preview-viewport">100dvh</section>

Parameters and values

  • vh / vw (1% of viewport height/width): Classic viewport units, can misbehave on mobile
  • dvh (dynamic viewport height): Adjusts in real-time as mobile browser UI shows/hides
  • svh / lvh (small/large viewport height): Fixed to the smallest or largest possible viewport state

Best practices

  • Use dvh instead of vh for full-height mobile layouts, to avoid content being cut off or leaving unwanted gaps as the address bar shows/hides
  • Use vw carefully for font-size - it can make text so small or large on extreme screen widths that it should typically be combined with clamp()
  • Test full-viewport-height layouts on actual mobile devices, not just a desktop browser's responsive mode, since the address bar behavior does not simulate accurately

Browser compatibility

chrome
Yes
firefox
Yes
safari
Yes
edge
Yes

These are the existing reference’s support labels, not tested minimum versions. Individual values and APIs can have different support. Check the linked specification before choosing a browser target.

CSS specifications (modules)

Specifications & further reading