Kiyaanix Technologies LLP

Kiyaanix Technologies
Main Menu

Modern CSS Viewport Units: svh, lvh, dvh – A Game Changer for Responsive Design

By /

For years, developers relied on 100vh (viewport height) to create full-height layouts. However, mobile browsers introduced a major pain point—dynamic UI elements like address bars and toolbars would cause layout shifts, leading to a poor user experience.

The new CSS viewport units—svh (Small Viewport Height), lvh (Large Viewport Height), and dvh (Dynamic Viewport Height)—solve this problem by providing precise control over viewport dimensions. These units ensure smoother, more stable layouts across all devices, making responsive design more reliable than ever.

This guide explores how these modern viewport units work, their differences, practical applications, and best practices for implementation.

Table of Contents

The Problem with Traditional (100vh)

The classic 100vh unit was designed to represent 100% of the viewport height. However, on mobile browsers, the viewport height changes dynamically due to:

  • Expanding/collapsing address bars
  • Disappearing navigation controls
  • On-screen keyboards

This behavior caused unexpected layout jumps, especially in full-height designs like hero sections or modals. Developers resorted to JavaScript workarounds, but these were inefficient and hacky.

Example of issue:

.hero-section {  
  height: 100vh; /* Causes jumps when browser UI resizes */  
}

The need for a better solution led to the introduction of svh, lvh, and dvh.

Introducing the New CSS Viewport Units

Small Viewport Height (svh)

  • Represents the smallest possible viewport height (when browser UI is fully expanded).
  • Ideal for ensuring content remains visible even when the address bar is present.

Use Case:

.header {  
  height: 10svh; /* Stays consistent regardless of UI changes */  
}

Large Viewport Height (lvh)

  • Represents the largest possible viewport height (when browser UI is minimized).
  • Useful for full-screen layouts that should expand when UI collapses.

Use Case:

.fullscreen-modal {  
  height: 100lvh; /* Takes maximum available space */  
}

Dynamic Viewport Height (dvh)

  • Adjusts in real-time as the browser UI changes.
  • Perfect for smooth transitions without layout shifts.

Use Case:

.hero-banner {  
  height: 100dvh; /* Adapts dynamically to UI changes */  
}

Practical Use Cases for svh, lvh, and dvh

  1. Full-Screen Hero Sections – Use dvh to avoid jumps when scrolling.
  2. Sticky Headers/Footers – svh ensures consistent sizing.
  3. Modals & Overlays – lvh maximizes space when browser UI is hidden.
  4. Mobile-First Designs – Combine these units for fluid responsiveness.

Example:

.hero {  
  min-height: 100dvh; /* Smooth full-height experience */  
}

Browser Support and Compatibility

As of 2024, most modern browsers support these units:

  • Chrome, Edge, Firefox, Safari (iOS 15+)
  • Partial support in older versions (fallbacks recommended)

Check current support: Can I Use

Best Practices for Using Modern Viewport Units

  1. Use dvh for dynamic layouts (e.g., scrolling effects).
  2. Prefer svh for fixed elements (headers, footers).
  3. Test on real devices to ensure smooth behavior.
  4. Provide fallbacks for older browsers:

Example:

.fallback {  
  height: 100vh;  
  height: 100dvh;  
}

Conclusion

The introduction of svh, lvh, and dvh marks a significant leap in CSS responsiveness. These units eliminate the frustrations of 100vh by offering precise, adaptive control over viewport dimensions.

By adopting these modern viewport units, developers can:
✔ Eliminate layout shifts on mobile devices.
✔ Create smoother, more professional UIs.
✔ Reduce reliance on JavaScript workarounds.

Start implementing svh, lvh, and dvh today to future-proof your designs and deliver flawless user experiences across all devices!

Scroll to Top