Viewport Units Get a Much-Needed Upgrade

Viewport units like vw and vh are handy for sizing things relative to the screen, but they've long frustrated developers, especially on mobile. The core issue: assuming 100vh equals the visible, usable area often breaks layouts, particularly when positioning fixed elements like buttons along the bottom of the screen. Get it wrong, and it could cost you millions—there's even a famous story about a bashful button that did exactly that.

The problem stems from how browser UI elements (like toolbars) shrink or expand the viewport dynamically. Existing workarounds are unintuitive and error-prone, and while Safari 15 improves things slightly, the fundamental awkwardness remains.

That may change soon. The CSS Values and Units spec now includes new viewport-related units to address these scenarios:

  • Large Viewport: lvh, lvw, lvmin, lvmax
  • Small Viewport: svh, svw, svmin, svmax
  • Dynamic Viewport: dvh, dvw, dvmin, dvmax

The dynamic variants look like the real winners here. They're designed to represent the currently usable space, automatically adjusting as browser interfaces show or hide. As Bramus Van Damme explains, the dynamic viewport automatically sizes itself, falling anywhere between 100vh (maximum) and 100svh (minimum), depending on what UI elements are visible.