Every Viewport Unit,
Explained.

Live pixel values, copy-paste snippets, and side-by-side comparisons for every CSS viewport unit — from classic vw/vh to modern dvh, svh, and lvh.

Width

—

Height

—

1vw

—

1vh

—

Live Calculator

= — px

Classic Units

Supported in all modern browsers since 2012.

vw Viewport Width

1% of the viewport's width. 100vw spans the full browser window width, including the scrollbar on some browsers.

1vw = —

width: 100vw;

max-width: 90vw;

font-size: clamp(1rem, 4vw, 2rem);

Use for Full-width layouts, fluid typography, hero banners

vh Viewport Height

1% of the viewport's height. 100vh fills the full browser window height. On mobile, the address bar can cause 100vh to overflow — use dvh.

1vh = —

height: 100vh;

min-height: 100vh;

height: 50vh;

Use for Full-height sections, sticky layouts (desktop)

On mobile, 100vh can overflow. Prefer dvh or svh.

vmin Viewport Minimum

1% of whichever is smaller — vw or vh. Scales with the narrower dimension, making it great for elements that should stay square.

1vmin = —

width: 50vmin; height: 50vmin;

font-size: 5vmin;

padding: 3vmin;

Use for Responsive squares, device-agnostic sizing

vmax Viewport Maximum

1% of whichever is larger — vw or vh. Scales with the dominant dimension. Useful for type that should scale whether in portrait or landscape.

1vmax = —

font-size: 3vmax;

padding: 5vmax;

Use for Typography scaled to dominant dimension

Dynamic Viewport Units CSS Level 4

Built for mobile browsers where the address bar shrinks and expands as you scroll.

dvh Dynamic Viewport Height

1% of the current viewport height — updates in real time as the browser UI expands or collapses. The recommended replacement for 100vh on mobile.

1dvh ≈ —

height: 100dvh;

min-height: 100dvh;

Use for Mobile-safe full-height layouts, replacing 100vh

svh Small Viewport Height

1% of the smallest possible viewport height (browser UI fully shown). Static — never overflows, but may leave unused space when the UI collapses.

1svh ≈ —

min-height: 100svh;

height: 100svh;

Use for Content that must never overflow the screen

lvh Large Viewport Height

1% of the largest possible viewport height (browser UI fully hidden). May cause a brief overflow until the UI collapses on first scroll.

1lvh ≈ —

height: 100lvh;

Use for Background fills, decorative elements

dvw Dynamic Viewport Width

1% of the current dynamic viewport width. Equivalent to vw on most browsers, but correctly handles UI panels that may reduce the available width.

1dvw ≈ —

width: 100dvw;

max-width: 80dvw;

Use for Full-width containers, mobile drawers

svh vs dvh vs lvh

Choosing the right height unit for mobile browsers.

Unit	UI visible	UI hidden	Updates live	Best for
`vh`	Overflows ⚠	Correct	No	Desktop-only layouts
`svh`	Fits exactly	Too small	No	No-overflow content
`dvh`	Fits exactly	Fits exactly	Yes ✓	Most mobile cases
`lvh`	Slight overflow	Fits exactly	No	Backgrounds, decoration

Browser Support

vw vh vmin vmax

Full Support

Chrome 26 · Firefox 19 · Safari 7 · Edge 12 · IE 9

dvh svh lvh dvw svw lvw

Wide Support