100vh causes overflow on mobile due to browser chrome

An element set to height: 100vh extends beyond the visible screen on mobile browsers. The URL bar and bottom navigation bar are not accounted for, causing a scroll or cutoff.

Use the dynamic viewport unit dvh (dynamic viewport height), or the svh/lvh variants depending on the desired behavior:

/* Modern approach: dvh adjusts as browser chrome appears/disappears */
.hero {
  height: 100dvh;
}

/* svh = small viewport (browser chrome visible) */
.section {
  min-height: 100svh;
}

/* Fallback for older browsers */
.hero {
  height: 100vh; /* fallback */
  height: 100dvh; /* override for supporting browsers */
}

On mobile browsers, the viewport height (100vh) is calculated based on the maximum viewport size — i.e., without the browser chrome. When the URL bar is visible, the actual visible area is smaller, so 100vh overflows.

Full-screen sections or hero components that overflow on mobile browsers.