All lab notes
Lab note 007SnippetCSS · Mobile
Fixing 100vh on mobile browsers with CSS variables
A compact technical record: the context, the useful detail, and the implementation path.
Working note. Short by design, but complete enough to return to when the same problem appears again.
Using 100vh on mobile often causes scroll issues because of the address bar. Here is the modern fix using dvh (Dynamic Viewport Height).
cssSnippet.h-screen-safe { height: 100vh; /* Fallback */ height: 100dvh; /* Modern browsers */}
If you need to support older iOS versions, use the JS calculation method:
jsSnippet// app.jsconst setHeight = () => { document.documentElement.style.setProperty( "--vh", `${window.innerHeight * 0.01}px`, );};window.addEventListener("resize", setHeight);