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

The Difference between vh/vw and % in CSS Units

CSS units such as vh and vw provide developers with versatile options for defining element dimensions relative to the viewport. However, their similarities with the more traditional % unit can raise questions about their distinctiveness.

Understanding vh and vw

vh (viewport height) and vw (viewport width) are units that represent a percentage of the height and width of the viewing area, respectively. For instance, 100vw signifies 100% of the viewport's width, regardless of the device's actual screen size.

Comparison with %

At first glance, vh/vw units seem redundant since % also represents a percentage of some parent element. However, the key distinction lies in the frame of reference.

Height vs. Viewport Height

The % unit typically measures a dimension relative to the height of its parent element. For example, a child element with a 100% height would occupy the full height of its parent, regardless of the viewport's size.

In contrast, vh and vw units measure dimensions relative to the viewport's height and width. This means that a 100vh element will always occupy 100% of the viewport's height, irrespective of its parent element's size.

Example

Consider a parent div element with a height of 200px and a child div element set to 100% height. While 100% would typically mean "100% of the parent," in this case, the child div could potentially extend beyond the viewport's height.

However, if the child div is set to 100vh, it will always occupy 100% of the viewport's height, ensuring a fully responsive and consistent layout across different viewport sizes.

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