Mobile viewport height without the 100vh hack
100vh on mobile includes the browser address bar and navigation controls even when they are visible, causing full-height elements to overflow. Dynamic viewport units (dvh, svh, lvh) adapt to the actual visible area.
2 height: 100dvh; /* shrinks with address bar */
3}
2 height: 100vh; /* overflows behind browser chrome */
3}
Browser Support for Viewport unit variants
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2023.
No mobile overflow
100dvh accounts for the browser address bar and navigation. It shrinks when the bar is visible and expands when it scrolls away.
Three units for three needs
dvh is dynamic (changes with chrome), svh is small (worst case, chrome fully visible), lvh is large (best case, chrome fully hidden).
Drop-in replacement on desktop
On desktop where viewport height is stable, dvh behaves identically to vh. Switch freely without breaking existing layouts.
How it works
On mobile browsers, 100vh is calculated including the address bar and navigation controls even when they overlay the page. A height: 100vh element ends up taller than the visible screen, pushing content behind the browser chrome.
Dynamic viewport units solve this. dvh updates as the browser chrome appears and disappears. svh is the small viewport height — the worst case with chrome fully visible. lvh is the large viewport height — chrome fully hidden. For full-screen sections, replace 100vh with 100dvh.