CSS units · Smallest viewport, chrome visible
dvh, svh and lvh
Dynamic, small and large viewport units describe the height as browser chrome shows or hides.
Key facts
| svh | Smallest viewport, chrome visible |
|---|---|
| lvh | Largest viewport, chrome hidden |
| dvh | Current dynamic viewport |
| Width variants | svw, lvw, dvw |
| Stability | svh/lvh are stable; dvh changes |
| Support | Modern browsers |
Three answers to one question
On a phone, the space available to the page changes as the address bar and toolbar slide away. svh measures the smallest state, lvh the largest, and dvh the current state. The width variants exist for completeness but change less often.
Use svh when content must always fit without being covered by chrome. Use dvh when the section should track the visible area. Use lvh when the layout should fill the screen once chrome hides.
Layout stability
dvh changes while the user scrolls, which can cause reflow and layout shift in a complex page. svh and lvh are stable and are safer for elements whose size affects surrounding content.
Provide a fallback for older browsers: declare 100vh first and the newer unit second. Browsers that do not understand the second declaration keep the first.
Frequently asked questions
Which unit should a full-screen hero use?
Often min-height: 100svh for stability, or 100dvh if tracking the visible area matters more than layout stability.
Do these units work on desktop?
Yes. Without dynamic chrome, the three values are usually equal.