Unlocking Dynamic Layouts with dvh: A New CSS Viewport Unit

In the realm of CSS, creating layouts that seamlessly adapt to varying screen sizes and browser interfaces has always been a challenge. While traditional viewport units like vh and vw have been instrumental, they often fall short when dealing with dynamic elements like address bars or toolbars that can resize on the fly. Enter dvh: a game-changing viewport unit that addresses these limitations and ushers in a new era of responsive design.

What is dvh?

• Meaning: “dvh” stands for “dynamic viewport height.”
• Definition: It represents 1% of the dynamic viewport height, which takes into account any browser UI elements that are dynamically expanded or retracted.
• Purpose: To create layouts that adjust fluidly to changes in viewport size, even when browser UI elements are present.

How dvh differs from vh?

• vh: Considers the initial viewport height, including any static browser UI elements.
• dvh: Excludes browser UI elements and considers the dynamically changing viewport height.

Key Advantages of dvh

• Perfect Fit: Ensures elements always fit within the visible viewport, regardless of browser UI.
• Smooth Scrolling: Prevents content from being obscured by browser UI elements during scrolling.
• Enhanced User Experience: Creates more immersive and responsive layouts that adapt to user interactions.

Common Use Cases

• Full-screen sections
• Hero images
• Scrolling animations
• Sticky headers and footers
• Modals and overlays

Browser Compatibility

• As of January 2024, dvh enjoys broad support across major browsers, including Chrome, Firefox, Safari, and Edge.

Considerations and Best Practices

• Performance: Overuse can impact performance due to frequent recalculations.
• Fallback: Provide fallbacks for older browsers using JavaScript-based solutions.
• Judicious Use: Employ dvh strategically for elements that truly require dynamic sizing.
• Testing: Thoroughly test across devices and browsers to ensure consistent behavior.

How to Use dvh

Applying to Height Properties

.element {
  height: 50dvh; /* Sets height to 50% of the dynamic viewport height */
}

Creating Full-Screen Sections

.fullscreen-section {
  height: 100dvh; /* Ensures full-screen height, even with UI elements */
}

Responsive Images and Videos

.responsive-image {
  width: 100%;
  height: 50dvh; /* Maintains aspect ratio while adjusting to viewport height */
}

Dynamically Resizing Elements

.expandable-content {
  max-height: 50dvh; /* Expands up to 50% of the viewport height, preventing overflow */
}

DVH (Device Height Viewport) and VH (Viewport Height) are both units used to define the height of an element in CSS. However, they differ in how they are calculated and how they respond to changes in the viewport size.

DVH

• DVH stands for Device Height Viewport. It is a unit that is equal to 1/100 of the height of the device’s screen. For example, on a device with a screen height of 600px, 1 DVH would be equal to 6px.
• DVH is a relative unit, which means that it is based on the size of the device’s screen. This makes it a good choice for ensuring that elements have the same relative size on different devices.
• DVH is not supported by all browsers.

VH

• VH stands for Viewport Height. It is a unit that is equal to 1% of the height of the viewport. For example, on a viewport with a height of 600px, 1 VH would be equal to 6px.
• VH is an absolute unit, which means that it is based on the size of the viewport, regardless of the size of the device’s screen. This makes it a good choice for ensuring that elements have the same absolute size on different devices.
• VH is supported by all browsers.

How DVH and VH work in mobile

On mobile devices, the viewport is typically smaller than the device’s screen. This means that elements that are sized using DVH will be smaller than elements that are sized using VH. For example, an element that is 10 DVH tall will be 60px tall on a device with a screen height of 600px, but it will only be 30px tall on a device with a viewport height of 300px.

An element that is 10 VH tall will be 60px tall on both devices, regardless of the size of the viewport.

Here is a table that summarizes the differences between DVH and VH:

Unit	Calculation	Responsive to device screen size	Responsive to viewport size	Supported by all browsers
DVH	1/100 of the device’s screen height	Yes	No	No
VH	1% of the viewport height	No	Yes	Yes

In Conclusion

The dvh unit marks a significant step forward in CSS responsiveness. By embracing its dynamic nature, web developers can craft more fluid and user-centric experiences that adapt gracefully to the ever-changing viewport landscape. As browser support continues to solidify, dvh is poised to become an indispensable tool in the modern web developer’s arsenal.