Skip to content
The CSS Chamber of Measures

/static/camara/en/unidade/svh-lvh-dvh/

Menu

CSS-017 · Viewport

svh · lvh · dvh

The phone's three heights: with the bar, without it, and the one that follows the gesture.

On a phone, the viewport changes size as the address bar appears and retracts — and the standard stopped pretending otherwise. svh measures the small viewport (bars in sight), lvh the large one (bars retracted) and dvh the dynamic one, which follows the gesture in real time.

Old 100vh usually equals the large viewport, which is why the footer of so many “full” screens slept behind the bar. 100svh promises to always fit; 100dvh promises to follow; lvh states the ceiling. Each has the cousins svw, lvw and dvw on the other axis.

svh
lvh
dvh
.tela-cheia {
  min-height: 100dvh;
}
Live demonstration: three columns of 12svh, 12lvh and 12dvh — equal on desktop; on a phone, scroll and watch the middle one beat the first.