100vh Vs 100 Dvh

Suzhoumeite

4 min read

·

Jun 24, 2024

16

Share

100vh vs 100dvh: Understanding the Difference in CSS

When it comes to setting the height of an element in CSS, two popular methods are often used: 100vh and 100dvh. While they may seem similar, they have distinct differences in their behavior and use cases.

What is 100vh?

100vh is a unit of measurement in CSS that represents 100% of the viewport height. The viewport is the visible area of the browser window, and vh is a relative unit that scales with the viewport's height. When you set an element's height to 100vh, it will occupy the full height of the browser window, regardless of the content inside the element.

Example

Consider the following HTML and CSS code:

I'm a full-height element!

.full-height {
  height: 100vh;
  background-color: #f0f0f0;
  padding: 20px;
}

In this example, the .full-height element will take up the full height of the browser window, even if its content is shorter than the viewport height.

What is 100dvh?

100dvh is a unit of measurement in CSS that represents 100% of the dynamic viewport height. Unlike vh, which is affected by the browser's scrollbar, dvh ignores the scrollbar's height and measures the full height of the viewport, including any overflow content.

Example

Consider the same HTML code as above, but with the following CSS:

.full-dynamic-height {
  height: 100dvh;
  background-color: #f0f0f0;
  padding: 20px;
  overflow: auto;
}

In this example, the .full-dynamic-height element will take up the full height of the viewport, including any overflow content, and will not be affected by the presence of a scrollbar.

Key differences

Here are the main differences between 100vh and 100dvh:

• Scrollbars: 100vh includes the height of the scrollbar, while 100dvh ignores it.
• Overflow content: 100vh stops at the viewport's height, while 100dvh includes the full height of the overflow content.

When to use each

• Use 100vh when you want an element to take up the full height of the browser window, regardless of the content inside.
• Use 100dvh when you want an element to take up the full height of the viewport, including any overflow content, and you don't want the scrollbar to affect the element's height.

In conclusion, while both 100vh and 100dvh can be used to set the height of an element, they have distinct differences in their behavior and use cases. By understanding the differences between these two units, you can create more accurate and responsive layouts in your CSS projects.