📱 Dynamic Viewport Units — dvh & dvw Explained

🌐 What Are Dynamic Viewport Units?

dvh and dvw are modern CSS viewport units that fix one of the biggest problems with traditional vh and vw — especially on mobile devices. They provide a stable, accurate measurement of the viewport size, even when browser UI elements (like address bars) expand or collapse.

>>“dvh gives you the REAL height of the usable screen — no more mobile layout jumps.”

Note

✔ Supported in all modern browsers
✔ Designed for mobile UX
✔ Prevents layout shifting caused by browser chrome

📦 Why Do We Need dvh & dvw?

Mobile browsers change viewport height as you scroll:

  • Address bar hides → viewport height increases
  • Address bar shows → viewport height decreases

Traditional 100vh is calculated using the largest possible height, which causes:

  • Content jumping up/down
  • Bottom elements becoming unreachable
  • Incorrect full-screen sections

Note

🔥 dvh always uses the current viewport height. 🔥 dvw uses the current viewport width.

📐 The 3 Types of Viewport Units (Modern)

UnitDescription
lvhLargest viewport height
svhSmallest viewport height
dvhDynamic height (changes as browser chrome moves)

Same applies to width units: lvw, svw, dvw.

📌 Syntax

Syntax

height: 100dvh;
width: 100dvw;

🧪 Example 1 — Perfect Full-Screen Section

Full Screen

.hero {
  height: 100dvh;
  background: url(hero.jpg) center/cover;
}

The hero section always fits the visible screen — no unexpected gaps.

🧪 Example 2 — Mobile Bottom Navigation

Bottom Nav

.bottom-nav {
  position: fixed;
  bottom: 0;
  height: 10dvh;
  width: 100dvw;
  background: #111;
}

The bottom navigation bar stays aligned even when browser UI changes height.

🧪 Example 3 — Prevent Scroll Jumping

Scroll-safe Full Screen Component

.page {
  min-height: 100dvh;
}

Eliminates sudden resizing when the mobile address bar collapses.

📱 Example 4 — Responsive Sidebar Using dvw

Sidebar Example

.sidebar {
  width: 30dvw;
  height: 100dvh;
  background: #222;
}

🧠 dvh vs vh — Key Differences

Propertyvhdvh
Mobile address bar affects layout?✅ Yes❌ No
Stable full-screen height?❌ No✅ Yes
Responsive to dynamic UI changes?❌ No✅ Yes

Note

💡 Always prefer dvh over vh for mobile screens.

🎨 dvh for Smooth Mobile Layouts

dvh is especially useful for:

  • Hero sections
  • Modals
  • Sidebars
  • Full-screen image sliders
  • Bottom sheets
  • Chat apps

⚠️ Common Mistakes

  • ❌ Still using 100vh for mobile designs (creates jumpy layouts)
  • ❌ Assuming dvh works the same as vh (it updates dynamically)
  • ❌ Not testing on actual mobile browsers

Note

✔ If supporting iOS Safari → dvh gives perfect results compared to vh. ✔ Combine dvh + safe-area insets for notch devices.

🔥 Summary

dvh and dvw are modern, reliable viewport units that eliminate the classic mobile viewport bug caused by the browser UI bar. They enable truly stable full-screen layouts and provide better responsiveness across all mobile browsers.

>>“Say goodbye to the 100vh mobile bug — dvh is the future of mobile CSS.”

Learn more →MDN Docs 📘