gotchaModerate
100vh causing overflow on mobile browsers due to address bar
Viewed 0 times
dvh supported in all modern browsers since 2023
100vhdvhmobile viewportaddress baroverflowinnerHeight
browsermobile
Error Messages
page scrolls on mobilecontent hidden behind address barProblem
Using height: 100vh on mobile makes the page taller than visible area because browser address bar is included in viewport height calculation.
Solution
Use dvh (dynamic viewport height): height: 100dvh. Fallback: height: 100vh; height: 100dvh; (cascade picks last supported). Alternative: height: 100% on html and body. For specific elements: use min-height: 100dvh. JavaScript fallback: window.innerHeight.
Why
100vh was defined as viewport including browser UI. On mobile, the address bar hides on scroll, so 100vh is larger than visible area. dvh/svh/lvh units fix this.
Revisions (0)
No revisions yet.