Stop Using 100vh on Mobile — Here’s What to Use Instead

height: 100vh doesn't work the way you think it does on mobile. It often causes layout issues like cut-off sections, weird scrolling, and elements being hidden behind the browser’s UI.

The reason: mobile browsers have dynamic toolbars that appear and disappear as the user interacts. But 100vh is based on the maximum possible height — not the current visible height.

The Real Fix: Use svh, lvh, and dvh

These are modern viewport units from the CSS Values and Units Module Level 4 that solve this problem natively.

100svh — Small Viewport Height

Represents the smallest height the viewport can be (when the browser UI is visible).

height: 100svh;        

✅ Use when content must be fully visible on page load — no surprises.

100lvh — Large Viewport Height

Represents the largest height, usually when the browser UI is hidden after scrolling.

height: 100lvh;        

✅ Great for full-screen sections like splash screens or intro steps.

100dvh — Dynamic Viewport Height

Represents the current visible height. It updates when the browser UI shows or hides — exactly what we wanted 100vh to do all along.

height: 100dvh;        

✅ Use this as your default for mobile full-height layouts. It just works.

Real-World Example

I replaced height: 100vh with 100dvh in a mobile landing page where the CTA button was getting hidden under the Safari address bar. No JavaScript needed. Layout fixed instantly.

Try it here: Live Demo (Mobile)

Why You Should Switch

• Less layout shifting when toolbars appear/disappear
• No need for JS hacks like window.innerHeight
• More stable, reliable mobile UIs
• Your layouts behave consistently on real devices

Browser Support

As of 2025, all major browsers (Chrome, Safari, Firefox, Edge) support these units. Check caniuse.com if you’re targeting legacy devices.

More info: MDN docs on viewport units

TL;DR — Use the Right Unit:

You’ll feel the difference. So will your users.

Source