Full-height section with dvh

Quick implementation

.full-section {
  min-height: 100dvh;
  display: grid;
  place-items: center;
}

/* Fallback for older browsers */
@supports not (min-height: 100dvh) {
  .full-section {
    min-height: 100vh;
  }
}

Prompt this to your LLM

Includes role, constraints, and edge cases to handle.

You are a senior frontend engineer building a landing page.

Goal: A full-viewport-height section that works correctly on mobile browsers where the address bar and toolbar resize.

Technical constraints:
- Use min-height: 100dvh (dynamic viewport height) instead of 100vh.
- Use display: grid with place-items: center to center content vertically and horizontally.
- Add a @supports fallback to 100vh for browsers that don't support dvh.
- Use min-height, not height, so content taller than the viewport can overflow naturally.

Edge cases:
- On iOS Safari, 100vh includes the area behind the address bar — 100dvh adjusts as the bar shows/hides.
- Content should not be clipped if it exceeds the viewport height.
- Test on real mobile devices — desktop simulators may not replicate the address bar behavior.

Why this matters in 2026

The 100vh bug on mobile has frustrated developers for years. On iOS Safari, 100vh includes the area behind the dynamic toolbar, so your "full-height" hero overflows by the toolbar's height. The dvh unit (dynamic viewport height) solves this by adjusting in real time as the browser chrome shows and hides. It shipped in all major browsers in 2023 and is the correct default for full-height layouts.

The logic

100dvh equals the viewport height at its current state — when the address bar is visible, 100dvh is smaller; when it retracts, 100dvh grows. Using min-height instead of height ensures content that exceeds the viewport can overflow naturally rather than being clipped. display: grid with place-items: center is the shortest way to center content both axes.

Accessibility & performance

The dvh unit triggers layout recalculations when the toolbar resizes, but browsers optimize this to avoid jank. For users who rely on keyboard navigation, ensure the centered content is reachable via tab order. Avoid using svh (small viewport height) for hero sections — it creates a gap at the bottom when the toolbar is visible.