svh / dvh / lvh

The full height a phone actually gives you

CaveatThree bars of the same height on a desktop, three different ones on a phone: svh assumes the address bar is showing, lvh assumes it has gone, and dvh is whichever is true this instant. That last one is the trap, because it changes mid-gesture as the chrome retracts, so anything sized in dvh can reflow on every scroll and take the rest of the layout with it.

FallbackAn engine that does not know the units drops the declaration, so write 100vh first and let 100dvh override it. Plain vh resolves to the large viewport, which is exactly the value that overflows under a phone's address bar, but it is the behaviour every layout was built against rather than a broken one.

<section class="sheet"></section>

.sheet {
  min-height: 100vh;   /* older engines */
  min-height: 100svh;  /* never under the bar */
}

Published 3 Oct 2026