How Do dvh, svh, and lvh Adapt to Mobile Toolbars?

Mobile browser interface elements like the address bar and navigation controls dynamically expand and collapse as users scroll, traditionally causing layout shifts when using standard vh units. To solve this, CSS introduced specialized viewport units—Small Viewport Height (svh), Large Viewport Height (lvh), and Dynamic Viewport Height (dvh)—each designed to respond differently to browser UI changes. Understanding how each unit calculates available screen height ensures mobile layouts remain stable, accessible, and properly aligned.

The Problem with Classic Viewport Units (vh)

Standard viewport height (100vh) represents 100% of the browser window's height. However, mobile browsers such as Safari on iOS and Chrome on Android present a unique challenge: their address bars and bottom navigation toolbars retract when scrolling down and reappear when scrolling up.

When mobile browsers implemented 100vh, most defined it using the largest possible viewport state (with toolbars hidden). Consequently, when a user lands on a page with expanded toolbars, an element sized at height: 100vh extends beneath the bottom browser controls. Critical UI elements like sticky call-to-action buttons or footer links often end up covered by the browser's own chrome until the user starts scrolling.

Small Viewport Height (svh)

The Small Viewport Height unit (svh) represents the viewport percentage when all dynamic browser toolbars are fully expanded and visible.

  • Behavior: 100svh corresponds to the smallest possible visible screen height.
  • Toolbar Adaptation: It assumes the address bar and navigation bar are occupying screen real estate, regardless of whether the user has scrolled.
  • Primary Use Case: Crucial interface elements that must never be obscured by mobile toolbars on initial page load, such as full-screen modal dialogues, login screens, or cookie consent banners.

Because svh uses a static calculation based on the minimum viewport size, elements sized with svh will leave empty space at the bottom of the screen if the user scrolls and the browser toolbars collapse.

Large Viewport Height (lvh)

The Large Viewport Height unit (lvh) represents the viewport percentage when all dynamic browser toolbars are completely collapsed or hidden.

  • Behavior: 100lvh corresponds to the largest possible visible screen height.
  • Toolbar Adaptation: It calculates dimensions assuming maximum available screen space, effectively mirroring how classic vh behaved on most mobile engines.
  • Primary Use Case: Background images, immersive media containers, or decorative sections where slight clipping behind an expanded address bar is visually acceptable.

If an element relies on 100lvh while browser toolbars are visible, its bottom section will sit beneath the active toolbar until the page is scrolled downward.

Dynamic Viewport Height (dvh)

The Dynamic Viewport Height unit (dvh) actively adapts its value in real time as browser toolbars expand or retract during scrolling.

  • Behavior: When toolbars are visible, 100dvh equals 100svh. When toolbars retract, 100dvh seamlessly scales up to match 100lvh.
  • Toolbar Adaptation: It dynamically recalculates based on the immediate, active viewport size.
  • Primary Use Case: Interactive hero sections or full-screen app-like views where content needs to resize fluidly to fill the exact visible window.

While dvh provides an exact fit, frequent recalculation during rapid scrolling can trigger browser layout recalculations and repaints. For performance-heavy pages, using fixed layout techniques combined with svh often yields smoother frame rates.

Practical Implementation and Fallbacks

Modern mobile and desktop browsers broadly support svh, lvh, and dvh. For environments requiring maximum backward compatibility, standard vh can serve as a simple fallback in your CSS declarations:

.hero-container {
  min-height: 100vh;  /* Fallback for legacy browsers */
  min-height: 100dvh; /* Modern dynamic calculation */
}

.modal-sheet {
  max-height: 90svh; /* Stays visible even when toolbars are open */
}

Choosing between svh, lvh, and dvh depends on whether an interface prioritizes immediate visibility, complete screen coverage, or fluid responsiveness during scroll interactions.