CSS units · 1% of viewport width
vw and vh
One vw is 1% of the viewport width; one vh is 1% of the viewport height.
Key facts
| vw | 1% of viewport width |
|---|---|
| vh | 1% of viewport height |
| Reference | Layout viewport |
| Mobile issue | vh includes browser chrome inconsistently |
| Scrollbar | vw can ignore or include it by platform |
| Standard | CSS Values and Units Level 4 |
Relative to the window
Viewport units scale with the browser window rather than the content. 100vw spans the full width and 100vh the full height, which makes them convenient for full-screen heroes and fluid typography. Unlike percentages, they do not depend on the parent element's size.
100vw can exceed the visible width when a vertical scrollbar is present, producing a horizontal scrollbar. Using width: 100% on a block avoids that; reserve vw for cases where the viewport itself is the reference.
The mobile height problem
On mobile browsers, the visible height changes as the address bar collapses and expands. The classic vh unit resolves against a viewport that may not match what the user sees, so a 100vh section can be taller or shorter than the screen.
Newer units address this directly: svh, lvh and dvh. Use them for full-height layouts and keep vh for cases where the older behaviour is acceptable.
Frequently asked questions
Why does 100vw cause horizontal scrolling?
On desktop, vw may include the area under a classic scrollbar, making it wider than the content box.
Is 100vh the visible height on mobile?
Not reliably. Use dvh, svh or lvh for control over browser chrome.