2026-10-17 · 6 min read · Rahul Chitturi
- css
- viewport
- layout
A rule of height: 100vh sizes the element against the layout viewport. On a phone, that viewport often includes space the browser chrome is covering, so a full-height page still scrolls by the height of the address bar. The small, large, and dynamic units exist so you can name which viewport you mean.
svh is the small viewport, measured with browser interfaces expanded. lvh is the large viewport, measured with those interfaces retracted. dvh is the dynamic viewport and changes as the interfaces show and hide. The same trio exists for width, inline, and block. A height bug is usually the height unit.
Pick the stable unit before the tracking one
100svh fits while the chrome is visible, and it does not change as the reader scrolls. 100lvh fills the tall viewport and overflows while the chrome is shown. 100dvh follows the chrome. That follow is what you want for a sheet that should grow when the bar hides, and it is a layout jump when a hero resizes during the scroll that hid the bar.
Percent height is a different contract. height: 100% needs a definite height on the containing block. A parent with height: auto does not supply one, and the percentage can look like a broken viewport unit. Read the specified unit before you change the parent.
- Record vh, svh, lvh, or dvh from the rule that painted.
- Read the computed pixel height, not the source token.
- Check the page with the browser chrome visible.
- Open the keyboard and read the height again.
Treat the keyboard as its own measurement
The on-screen keyboard changes the visual viewport. Whether dvh follows that change depends on the browser and on interactive-widget. Copy the computed pixel height with the keyboard closed and with it open. A unit that was right for the address bar can still slide under the keyboard.
Safe-area insets are padding for the device cutout and the home indicator. They are not a substitute for svh. Add the inset when content must clear the indicator. Do not add it twice because a viewport unit already got smaller.
Flashman's CSS formatter pretty-prints and minifies. It removes comments and collapses whitespace, and it does not resolve vh or dvh to pixels. Diff the source rule against the computed height you copied from the device. Use the JSON formatter when that measurement is stored in a bug report.