iOS Safari 100vh includes the address bar — viewport height fix

On iOS Safari, 100vh includes the area behind the address bar and bottom navigation. Full-height elements overflow the visible area, creating scrollbars and cut-off content on mobile.

Use dvh (dynamic viewport height) instead of vh: height: 100dvh. This adapts as the address bar shows/hides. Fallback for older browsers: height: 100vh; height: 100dvh;. Alternative: use CSS custom property set by JavaScript: document.documentElement.style.setProperty('--vh', window.innerHeight 0.01 + 'px'), then height: calc(var(--vh, 1vh) 100). For fixed-position elements: use position: fixed with inset: 0 instead of width/height 100%%.

The viewport height specification originally included the full viewport including browser chrome. dvh, svh, and lvh units were created specifically to address mobile browser viewport inconsistencies.