On mobile browsers, 100vh is measured as if the address bar were hidden, so a full-height section can be taller than what you can see. Use 100dvh (dynamic viewport height) to follow the visible area, or 100svh for the smallest viewport. Add 100vh as a fallback for older browsers.
The problem
Phone browsers show and hide their address bar as you scroll. The classic vh unit is based on the largest viewport, with the bar hidden. A hero section set to height: 100vh is therefore taller than the visible screen when the bar is shown, and its bottom, often a button, sits below the fold.
The fix
Modern CSS has three viewport height units: svh (smallest viewport), lvh (largest) and dvh (dynamic, follows the current visible height). Use a fallback first so older browsers keep working:
- height: 100vh;
- height: 100dvh;
Which one to pick
- dvh: full-screen layouts that should always fill the visible area, such as app shells.
- svh: hero sections where you never want content to be cut off, at the cost of a small gap when the bar hides.
- lvh: rarely what you want for content you need to see.
Check it on a phone frame
Desktop browsers do not have a collapsing address bar, so this bug is easy to miss. Preview your full-height sections on a phone frame and, for the final check, on a real phone: a frame shows the right dimensions but not the behavior of the browser bar.
Frequently asked questions
- Why is 100vh taller than my phone screen?
- Mobile browsers compute vh with the address bar hidden, so 100vh can exceed the visible height while the bar is showing.
- What is dvh in CSS?
- dvh is the dynamic viewport height unit. It follows the visible height of the viewport as the browser bar shows and hides.
- Is dvh supported?
- Current versions of the major browsers support it. Keep a 100vh declaration before it as a fallback.
Install Mobile Preview from the Visual Studio Marketplace · Open VSX (Cursor, Windsurf, VSCodium) · Pricing
More: all guides · device sizes · The viewport meta tag explained: what it does and the one line you need · Safe areas in CSS: avoid the notch and the Dynamic Island · Tailwind breakpoints vs real phones and tablets · A mobile checklist for AI-generated UI (what usually breaks first) · How to make a phone mockup screenshot of your website (free)