Mastering New CSS Viewport Units: lv, sv, and dv for Mobile Layouts

Why 100vh breaks on mobile

On desktop browsers 100vh equals the full visible viewport height. Mobile browsers, however, have dynamic UI elements (address bar, toolbars) that expand and collapse while scrolling. The viewport height is still calculated as if those UI elements were hidden, so elements sized with 100vh become taller than the actually visible area, causing content to be clipped.

New viewport unit families

The CSS Working Group introduced three families of viewport units that correspond to the three possible states of a mobile viewport.

Large viewport units (lv)

Units lvh, lvw, lvmin and lvmax assume all browser UI is fully collapsed. They represent the maximum possible viewport size – effectively a “pretend 100vh ”.

.fullscreen-modal {
  position: fixed;
  inset: 0;
  width: 100lvw;
  height: 100lvh;
  background: rgba(0, 0, 0, 0.85);
  display: grid;
  place-items: center;
}

Small viewport units (sv)

Units svh, svw, svmin and svmax assume all browser UI is fully expanded. They guarantee the minimum visible area regardless of UI state.

.sticky-cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100svw;
  padding: 1rem;
  background: #1a1a2e;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Dynamic viewport units (dv)

Units dvh, dvw, dvmin and dvmax update in real time as the browser UI expands or collapses, always matching the actual visible area.

.hero {
  height: 100dvh;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
}

Practical usage examples

Hero section that fits the initial visible area

.hero {
  height: 100svh; /* guarantees visibility when address bar is present */
  display: grid;
  place-items: center;
  padding: 2rem;
  background-image: url('/hero-bg.jpg');
  background-size: cover;
  background-position: center;
  text-align: center;
}

App shell with header, scrollable content, and bottom navigation

.app-shell {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100dvh; /* always matches the current viewport */
  overflow: hidden;
}
.app-header { height: 56px; background: #1a1a2e; color: white; display: flex; align-items: center; padding: 0 1rem; }
.app-content { overflow-y: auto; padding: 1rem; -webkit-overflow-scrolling: touch; }
.app-nav { height: 64px; border-top: 1px solid #e0e0e0; display: flex; justify-content: space-around; align-items: center; background: white; }

Side‑drawer navigation that opens while the address bar is visible

.drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: min(320px, 85svw);
  height: 100svh; /* never exceeds the visible viewport */
  background: white;
  overflow-y: auto;
  padding: 2rem 1.5rem;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

Fallback for older browsers

Modern browsers (Chrome 108+, Safari 15.4+, Firefox 101+) support the new units. Older browsers ignore unknown declarations, so a two‑line cascade provides a safe fallback.

.hero {
  height: 100vh;   /* fallback for browsers that don’t understand dvh */
  height: 100dvh;  /* overrides the fallback in supporting browsers */
}

Choosing the appropriate unit

Use lv units when you want an element to fill the screen regardless of UI visibility (e.g., full‑screen modals).

Use sv units when the element must stay within the guaranteed visible area (e.g., sticky bars, banners, drawers).

Use dv units when the element should always match what the user currently sees (e.g., hero sections, app shells).

If you are unsure, svh is the safest default because it ensures full visibility on initial load.

Conclusion

The long‑standing mobile bug with 100vh is resolved by the new viewport unit families. They are native CSS solutions, not workarounds, and allow developers to describe viewport behavior precisely across all mobile scenarios.