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 height and width of the viewport, allowing developers to design flexible and adaptable Web interfaces. This guide will cover traditional vh and vw units and introduce newer units such as dvh, lvhand svhexplaining how they enhance responsiveness and handle viewport changes more efficiently.

1.What are the viewport units in CSS?

Viewport units are relative units that dynamically adjust based on the size of the browser window. 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 example:

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

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

2. Limitations of tradition vh and vw

although vh and vw Works well in most cases, they don’t take into account certain dynamic changes in the viewport, such as:

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

These limitations can cause designs to look inconsistent or cause unexpected layout issues, especially on mobile devices.

3. New viewport units: dvh, lvhand svh

To solve these problems, CSS introduced three new units: dvh (dynamic window height), lvh (large window height), and svh (small window height).

Dynamic window height (dvh)

dvh Dynamically adjust to changes in the viewport, such as the appearance or disappearance of browser UI elements. It represents 1% of the current window height, ensuring your layout adapts instantly.

example:

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

This ensures div Always fits the visible area, even if the browser UI changes.

Large viewport height (lvh)

lvh Represents 1% of the maximum possible window height, ignoring dynamic UI changes (such as mobile URL bars).

example:

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

This is useful for layouts that need to remain consistent regardless of changes to the browser UI.

Small window height (svh)

svh Represents 1% of the minimum possible window height, adapting to situations where the browser UI takes up most of the screen.

example:

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

This unit is particularly useful when dealing with devices where UI elements such as keyboard popups can reduce the visible area.

4. Window width (vw)

vw Measures 1% of the viewport width. It remains consistent and is not affected by dynamic changes such as scrolling or UI appearance.

example:

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

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

5. Practical use cases

Here’s how these units are used 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 that the hero section always fits the screen, even if the mobile address bar is hidden or appears.

Full page modal box

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

use svh Ensures that the mode is still available even if the on-screen keyboard lowers the viewport height.

sticky footer

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

Sticky footer that maintains its size across devices.

6. Combine units for maximum flexibility

You can mix and match these units for a more adaptable design. 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

although vh and vw With broad cross-browser support, dvh, lvhand svh is a newer addition. Make sure to 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 window units such as vh, vw, dvh, lvhand svh Is a powerful tool for creating responsive and adaptable web designs. although vh and vw handles most cases, the newer dvh, lvhand svh Units address limitations, especially on mobile devices. By understanding and utilizing these units, Mobile application developer Produce seamless, user-friendly designs that work across all installations and scenarios.