What's the Key Difference Between CSS Units `vh`/`vw` and `%`?

CSS Units: Exploring the Differences between vh/vw and %

Introduction

In the realm of CSS styling, a wide range of units can be used to define element dimensions. Among these, vh and vw are relatively new units that have sparked some confusion due to their perceived similarities with the more common percentage unit. This article explores the fundamental difference between these units to shed light on their unique application scenarios.

vh and vw: A Percentage of the Viewport

As the question suggests, vh (viewport height) and vw (viewport width) are units that measure the percentage of the current viewport's height and width, respectively. For example, 100vh represents 100% of the current viewport's height.

Percentage Units (%): Relative to Parent Elements

In contrast to vh and vw, percentage units (%) express a value relative to the size of the parent element. This means that 100% height will always represent 100% of the height of the element's parent, regardless of the viewport size.

The Key Distinguishing Factor: Viewport Dependence

The crucial difference between vh/vw and % lies in their dependency on the viewport. vh and vw units are designed to scale dynamically with the viewport, ensuring that element dimensions adjust accordingly as the user resizes the browser window or navigates to different devices.

For example, setting an element's height to 100vh will guarantee that it fills the entire height of the viewport, regardless of the specific screen resolution or device. On the other hand, 100% height will only fill the height of the parent element, potentially leaving empty space below the element if the parent has a smaller height than the viewport.

Practical Example

Consider the provided HTML and CSS code snippet:

<div class="parent">
    <div class="child">100% height (parent is 200px)</div>
</div>
<div class="viewport-height">100vh height</div>

body, html { height: 100%; }
.parent { height: 200px; }
.child { height: 100%; }
.viewport-height { height: 100vh; }

In this scenario, setting the child's height to 100% will make it fill the entire height of the parent div (200px), leaving empty space below. However, setting the viewport-height div's height to 100vh will make it fill the entire height of the viewport, regardless of the size of the parent or the screen resolution.

Conclusion

While vh/vw and % units may appear similar on the surface, their underlying dependency on the viewport sets them apart. vh and vw units are particularly useful for creating responsive layouts that adapt seamlessly to varying screen sizes, ensuring a consistent user experience across devices.

The above is the detailed content of What's the Key Difference Between CSS Units `vh`/`vw` and `%`?. For more information, please follow other related articles on the PHP Chinese website!