100dvh vs 100vh: Fix the Mobile Full-Height Bug

Quick answer: Use 100dvh for full-height layouts that should match what the user actually sees on mobile. 100vh is the classic unit, but on many phones it ignores the address bar and toolbars, so heroes, splash screens, and sticky footers overflow or leave gaps. Confirm the pixel difference on your device with the CSS viewport units tool.

Why 100vh breaks on mobile

vh is 1% of the viewport height. Desktop browsers make that feel simple: the window height barely changes.

Mobile browsers hide and show chrome as you scroll. Historically, 100vh often meant the large viewport (chrome hidden). When the bar was visible, your "full height" section was taller than the screen. Users saw cut-off buttons, double scrollbars, or a layout that jumped when the bar collapsed.

That is the bug people mean when they search for 100dvh vs 100vh.

What 100dvh, 100svh, and 100lvh mean

Modern CSS adds units that map to small, large, and dynamic viewports:

Unit	Means	Best for
100vh	Classic viewport height (browser-dependent on mobile)	Older browsers, simple desktop layouts
100dvh	Dynamic viewport — updates as chrome shows/hides	Full-height heroes, app shells, overlays
100svh	Small viewport — chrome fully visible	Content that must always fit without scrolling the page chrome away
100lvh	Large viewport — chrome fully hidden	Backgrounds that should fill the max possible height

Rule of thumb for 2026:

• Prefer dvh for interactive full-height UI.
• Use svh when a sheet or wizard must fit even with the keyboard-adjacent browser UI open.
• Use lvh for decorative fills that can be cropped slightly when chrome is visible.

Open the live tool on a phone and watch vh and dvh diverge as you scroll the chrome away.

Copy-ready CSS patterns

Full-height hero that tracks the visible viewport:

.hero {
  min-height: 100vh; /* fallback */
  min-height: 100dvh;
}

Safe fallback stack with small viewport for critical UI:

.panel {
  height: 100vh;
  height: 100svh;
  height: 100dvh;
}

Browsers that understand newer units use the last declared value they support. Putting vh first keeps old engines from ignoring the rule entirely.

Avoid mixing blindly with position: fixed footers. Fixed elements already use the visual viewport in many browsers. Pair them with the viewport checker and note safe-area insets on notched phones.

Related concepts developers mix up

• Screen height (screen.height) is the display, not the browser layout area. See viewport vs screen width vs DPR.
• innerHeight is JavaScript's live layout height — closer to what dvh tracks than to marketing screen size.
• DPR scales CSS pixels to physical pixels. It does not fix the vh chrome bug. Read DPR and CSS pixels.

When you still might use 100vh

• Desktop-only admin tools where chrome never collapses.
• Very old browser support matrices that lack dvh (increasingly rare in 2026).
• Cases where you intentionally want the large viewport height for a background layer.

Even then, a min-height: 100dvh progressive enhancement costs almost nothing.

FAQ

Is 100dvh better than 100vh?

For mobile full-height layouts, usually yes. 100dvh follows the visible viewport as browser UI shows and hides. Keep 100vh as a fallback for older browsers.

What is the difference between dvh, svh, and lvh?

dvh is dynamic and updates live. svh is the smallest viewport (chrome visible). lvh is the largest viewport (chrome hidden). Measure all four with the CSS viewport units tool.

Does 100dvh work on desktop?

Yes. On desktop, dvh, svh, lvh, and vh are often identical or nearly identical because browser chrome does not collapse the same way.

How do I see 100dvh vs 100vh on my phone?

Open the free CSS viewport units tool in mobile Safari or Chrome, note the pixel heights, then scroll so the address bar hides and watch dvh update.

The short answer

Use 100dvh (with a 100vh fallback) for full-height mobile UI. Reach for svh when content must fit with chrome visible, and lvh for max-height backgrounds. Verify live values with the CSS viewport units tool, then cross-check layout width with What is my viewport.