Using Viewport Units in CSS: vw and vh

CSS viewport units turn viewport dimensions into lengths. Under current CSS behaviour, the default vh unit maps to the large viewport and remains stable as mobile browser controls expand or retract, unless the viewport itself changes. The problem is that 100vh can be taller than the area currently visible while those controls are expanded. The small, large, and dynamic viewport units make that choice explicit.

The two most commonly‑used viewport units are vw (viewport width) and vh (viewport height). These units are equivalent to 1% of the viewport's width and height respectively. So for example, if the viewport's width is 1000 pixels, then 1vw is equal to 10 pixels, and 50vw would be 500 pixels. Similarly, if the viewport's height is 800 pixels, then 1vh is equal to 8 pixels.

The important thing to bear in mind is that these are fluid, dynamic units, which means that as the screen size changes, so do the calculated values. If that 1000px‑wide screen we talked about previously was resized to 500 pixels wide instead, then 1vw would become 5px, and 50vw would become 250px.

They are entirely interchangeable with any other standard form of CSS unit and can simply be included in your property values, like so:

.example {
  width: 50vw;
  height: 25vh;
}

This would set the width of the element .example to 50% of the viewport's width, and the height to 25% of the viewport's height (assuming ‑ of course ‑ that it is a block‑level element).

Support is already reasonably good, but you should still consider offering a fallback value for any older browsers that might visit your application, either using percentage units (which may be equivalent depending on the contextual layout of your element), or otherwise explicit units.

So, revisiting the example above:

.example {
  width: 200px;
  width: 50vw;
  height: 150px;
  height: 25vh;
}

This would fall back to an element 200px wide and 150px high on non‑supporting browsers.

Viewport units are useful when a size genuinely relates to the viewport. svh represents the small viewport, lvh the large viewport, and dvh the dynamic viewport that may resize as browser controls change. Default vh uses the large viewport, so it is stable but may not match the currently visible area. Content still needs sensible minimum, maximum, and overflow constraints.