The large, small, and dynamic viewport units

New CSS units that account for mobile viewports with dynamic toolbars.

Bramus

The viewport and its units

To size something as tall as the viewport, you can use the vw and vh units.

• vw = 1% of the width of the viewport size.
• vh = 1% of the height of the viewport size.

Give an element a width of 100vw and a height of 100vh, and it will cover the viewport entirely.

The vw and vh units landed in browsers with these additional units

• vi = 1% of the size of the viewport’s inline axis.
• vb = 1% of the size of the viewport’s block axis.
• vmin = the smaller of vw or vh.
• vmax = the larger of vw or vh.

These units have good browser support.

The need for new viewport units

While the existing units work well on desktop, it’s a different story on mobile devices. There, the viewport size is influenced by the presence or absence of dynamic toolbars. These are user interfaces such as address bars and tab bars.

Although the viewport size can change, the vw and vh sizes do not. As a result, elements sized to be 100vh tall will bleed out of the viewport.

When scrolling down these dynamic toolbars will retract. In this state, elements sized to be 100vh tall will cover the entire viewport.