Understanding vh, dvh, lvh, and svh in CSS: Definitions, Examples, and Best Practices

In web development, creating responsive designs that adapt to various screen sizes and device orientations is crucial. CSS units like vh, dvh, lvh, and svh help achieve this flexibility by sizing elements relative to the viewport. This article will explore these units in detail, provide specific examples of when to use them, and offer guidance on best practices.

What are vh, dvh, lvh, and svh?

1. vh (Viewport Height)

Definition: vh stands for "viewport height." One vh unit is equal to 1% of the height of the viewport (the visible area of the web page).

Usage: Use vh for creating full-height sections or ensuring elements occupy a percentage of the screen height. Be cautious, as it does not account for changes in viewport height (e.g., browser address bar expansion), which can cause content to overlap or be cut off.

Examples:

• Hero Sections: Use vh to create a full-screen hero section that adjusts with the viewport size.

.hero {
    height: 100vh; /* Full height of the viewport */
}        

• Full-Screen Modals: Ensure modals cover the entire screen.

.modal {
    height: 100vh; /* Full height of the viewport */
}        

2. dvh (Dynamic Viewport Height)

Definition: dvh stands for "dynamic viewport height." It accounts for changes in the viewport height due to dynamic UI elements like on-screen keyboards or address bars.

Usage: Use dvh for elements that need to adapt to dynamic changes in viewport height, such as forms on mobile devices. Note that it may not be fully supported across all browsers, so implement fallbacks.

Examples:

• Input Fields and Forms: Adjust form height dynamically when an on-screen keyboard appears

.form-container {
    height: 100dvh; /* Adjusts height based on dynamic viewport changes */
    height: 100vh;  /* Fallback for unsupported browsers */
}        

• Chat Windows: Ensure chat windows resize correctly when the virtual keyboard is active.

.chat-window {
    height: 100dvh; /* Adjusts height based on dynamic viewport changes */
    height: 100vh;  /* Fallback for unsupported browsers */
}        

3. lvh (Large Viewport Height)

Definition: lvh stands for "large viewport height." It represents the largest possible viewport height, accounting for any UI elements that can expand or collapse.

Usage: Use lvh when you want to maintain a consistent height regardless of the browser’s UI changes. Use sparingly, as it is a specialized unit.

Examples:

• Sticky Footers: Ensure footers stick to the bottom of the viewport, even when the address bar collapses.

.footer {
    height: 10lvh; /* Consistent height based on the largest viewport */
}        

• Navigation Bars: Maintain a consistent navigation bar height regardless of UI changes.

.nav-bar {
    height: 10lvh; /* Consistent height based on the largest viewport */
}        

4. svh (Small Viewport Height)

Definition: svh stands for "small viewport height." It represents the smallest possible viewport height, accounting for any UI elements that can expand.

Usage: Use svh to ensure elements fit within the smallest possible viewport height, avoiding overflow. Ensure content remains accessible and readable in the smallest viewport scenarios.

Examples:

• Responsive Images: Ensure images fit within the smallest viewport height to avoid overflow.

.responsive-image {
    height: 100svh; /* Adjust height based on the smallest viewport */
}        

• Content Sections: Ensure content sections adapt to the smallest possible viewport height, avoiding cut-off content.

.content-section {
    height: 100svh; /* Adjust height based on the smallest viewport */
}        

General Best Practices

Combine Units

Use a combination of vh, dvh, lvh, and svh judiciously to create flexible layouts that adapt to different viewport changes.

.responsive-section {
    min-height: 100svh;
    max-height: 100lvh;
}        

Testing and Fallbacks

Test your designs across multiple devices and implement fallbacks for browsers that do not support newer units like dvh.

.dynamic-height {
    height: 100dvh; /* Adjusts height based on dynamic viewport changes */
    height: 100vh;  /* Fallback for unsupported browsers */
}        

Progressive Enhancement

Start with basic vh units and enhance with dvh, lvh, and svh as needed. Ensure the core functionality and layout work without relying on newer units.

By understanding the drawbacks and following best practices, you can create responsive and adaptable web designs that work well across different devices and scenarios. Leveraging vh, dvh, lvh, and svh effectively will help you build modern, user-friendly web pages that provide a seamless experience for all users.