Why 100vh can be tricky on mobile
Classic vh units were simple on desktop, but mobile browsers have dynamic address bars and toolbars. When browser chrome expands or collapses, a 100vh section can appear too tall, hide content, or create unexpected scrolling.
When to use 100dvh
The dvh unit reflects the dynamic viewport height. It is often a better choice for app-like panels, mobile sections, and full-screen layouts where the visible page height should respond to browser UI changes.
When to use svh and lvh
Small viewport height, or svh, represents a safer minimum visible height. Large viewport height, or lvh, represents the larger possible viewport. Use them when you need predictable bounds instead of a constantly changing value.
A safer CSS pattern
For full-height sections, consider pairing min-height with dynamic units and sensible fallbacks. Test the result on real mobile browsers, responsive mode, and different orientations before relying on one unit everywhere.
Safer full-height CSS example
Start with a simple fallback, then layer modern viewport units where supported.
.hero {
min-height: 100vh;
min-height: 100svh;
}
@supports (height: 100dvh) {
.hero {
min-height: 100dvh;
}
}