CSS Viewport Units: CSS *vh (dvh, lvh, svh) and *vw units

CSS viewport units are essential for creating responsive layouts that adapt to different screen sizes. These units measure dimensions relative to the viewport's height and width, allowing developers to design flexible and adaptable web interfaces. This guide will cover the traditional vh and vw units and introduce newer units like dvh, lvh, and svh, explaining how they enhance responsiveness and handle viewport changes more effectively.

1. What Are Viewport Units in CSS?

Viewport units are relative units that adjust dynamically to the size of the browser's viewport. The most commonly used are:

• vh: 1% of the viewport height.
• vw: 1% of the viewport width.

These units make it easy to design elements that scale with the size of the browser window. For instance:

div {
  width: 50vw; /* 50% of the viewport width */
  height: 100vh; /* 100% of the viewport height */
  background-color: lightblue;
}

In this example, the div spans half the width and the full height of the viewport.

2. Limitations of Traditional vh and vw

While vh and vw work well in most scenarios, they don’t account for certain dynamic changes in the viewport, such as:

• The appearance of the browser’s address bar or navigation controls on mobile devices.
• Changes triggered by device orientation or resizing the browser window.

These limitations can cause designs to appear inconsistent or result in unintended layout issues, especially on mobile.

3. The New Viewport Units: dvh, lvh, and svh

To address these issues, CSS introduced three new units: dvh (Dynamic Viewport Height), lvh (Large Viewport Height), and svh (Small Viewport Height).

Dynamic Viewport Height (dvh)

dvh adjusts dynamically to changes in the viewport, such as the appearance or disappearance of browser UI elements. It represents 1% of the current viewport height, ensuring your layout adapts in real-time.

Example:

div {
  height: 100dvh; /* Adjusts dynamically to visible viewport height */
  background-color: lightgreen;
}

This ensures the div always fits the visible area, even when browser UI changes.

Large Viewport Height (lvh)

lvh represents 1% of the largest possible viewport height, ignoring dynamic UI changes (like mobile address bars).

Example:

div {
  height: 100lvh; /* Fixed to the maximum viewport height */
  background-color: lightcoral;
}

This is useful for layouts that need to maintain consistency, regardless of browser UI changes.

Small Viewport Height (svh)

svh represents 1% of the smallest possible viewport height, accommodating scenarios where browser UI occupies a significant portion of the screen.

Example:

div {
  height: 100svh; /* Adjusts to the smallest viewport height */
  background-color: lightgoldenrodyellow;
}

This unit is particularly helpful when dealing with devices where UI elements like keyboard pop-ups can shrink the visible area.

4. Viewport Width (vw)

vw measures 1% of the viewport width. It remains consistent and isn’t affected by dynamic changes like scrolling or UI appearance.

Example:

div {
  width: 100vw; /* Full viewport width */
  background-color: lightpink;
}

This is ideal for horizontal layouts or full-width designs.

5. Practical Use Cases

Here’s how these units can be applied in real-world scenarios:

Responsive Hero Section

.hero {
  height: 100dvh; /* Ensures the hero fits the visible viewport */
  width: 100vw;
  background: url('hero.jpg') no-repeat center center/cover;
}

This ensures the hero section always fits the screen, even when mobile address bars hide or appear.

Full-Page Modals

.modal {
  height: 100svh; /* Accounts for the smallest viewport height */
  width: 100vw;
  overflow-y: auto; /* Allows scrolling if needed */
  background-color: white;
}

Using svh ensures the modal remains usable even when the on-screen keyboard reduces the viewport height.

Sticky Footer

footer {
  height: 10lvh; /* Fixed to the largest viewport height for consistency */
  width: 100vw;
  background-color: darkgray;
}

A sticky footer that maintains its size across various devices.

6. Combining Units for Maximum Flexibility

You can mix and match these units for more adaptive designs. For example:

.container {
  min-height: 100svh; /* Ensures usability on smallest viewport */
  height: 100dvh; /* Fills visible area dynamically */
  max-height: 100lvh; /* Prevents exceeding the largest viewport height */
}

This approach ensures that the design adapts to all possible viewport scenarios.

7. Browser Support

While vh and vw are widely supported across browsers, dvh, lvh, and svh are newer additions. Ensure you check browser compatibility and provide fallbacks for older browsers.

Fallback Example:

.container {
  height: 100vh; /* Fallback for older browsers */
  height: 100dvh; /* Preferred for modern browsers */
}

8. Conclusion

CSS viewport units like vh, vw, dvh, lvh, and svh are powerful tools for creating responsive and adaptable web designs. While vh and vw handle most cases, the newer dvh, lvh, and svh units address limitations, especially on mobile devices. By understanding and leveraging these units, mobile app developers can craft seamless, user-friendly designs that work across all devices and scenarios.