---
title: "CSS Viewport and Container Units Cheatsheet"
slug: "css-viewport-units"
category: "cheatsheets"
tags: ["cheatsheets", "css", "viewport", "container-queries", "responsive", "mobile"]
status: "stable"
last_updated: 2026-09-27
summary: "Lookup tables for CSS viewport units (vw, vh, svh, lvh, dvh) and container query units (cqi, cqb, cqmin), with when each wins and the mobile browser-chrome gotchas."
related: ["[[cheatsheets/css-units]]", "[[frontend/css-container-queries]]", "[[frontend/tailwind-responsive]]", "[[seo/mobile-first]]", "[[frontend/css]]"]
---

## Overview

Viewport units size elements against the browser window, and container units size them against the nearest query container. Mobile browsers complicate the first group because the URL bar and toolbars show and hide as the user scrolls, which is why the small, large, and dynamic variants exist. Use viewport units for page-level shells and container units inside reusable components. For font-relative, percentage, and grid units, see [[cheatsheets/css-units]].

## Viewport units

| Unit | What it measures | Notes |
| --- | --- | --- |
| `vw` | 1% of viewport width. | Fluid typography, hero sections. Includes scrollbar width in some browsers. |
| `vh` | 1% of viewport height. | Avoid for mobile full-screen layouts; see dynamic units below. |
| `vmin` | 1% of the smaller viewport dimension. | Square elements that fit on any orientation. |
| `vmax` | 1% of the larger viewport dimension. | Backgrounds that must always cover. |
| `svh` | Small viewport height (browser chrome fully visible). | Safe lower bound for mobile; use for fixed footers. |
| `lvh` | Large viewport height (browser chrome hidden). | Use for elements that can expand when chrome disappears. |
| `dvh` | Dynamic viewport height (updates as chrome shows/hides). | Full-screen app shells; causes reflow on scroll. |
| `svw` / `lvw` / `dvw` | Width equivalents. | Mirror the height variants. |

Prefer `dvh` for `min-height: 100dvh` on full-page containers. The reflow cost is acceptable; the wrong fixed height is not.

Common viewport gotchas:

- `vh` on mobile is based on the large viewport, so a `100vh` element is taller than the visible area while the browser chrome is showing. Use `dvh` or `svh` instead.
- `100vw` includes the vertical scrollbar in browsers with classic scrollbars, which can cause a horizontal scrollbar. Use `100%` for full-width blocks.

## Container-relative units (cq*)

Require `container-type: inline-size` (or `size`) on an ancestor.

| Unit | Relative to |
| --- | --- |
| `cqi` | 1% of the container's inline size. |
| `cqb` | 1% of the container's block size. |
| `cqw` / `cqh` | Explicit container width / height. |
| `cqmin` / `cqmax` | Smaller / larger container dimension. |

Use container units inside component CSS so the component adapts to its slot, not the viewport. See [[frontend/css-container-queries]] for the full pattern.

## Related

- [[cheatsheets/css-units]]: font-relative, percentage, and grid units
- [[frontend/css-container-queries]]
- [[frontend/tailwind-responsive]]
- [[seo/mobile-first]]
- [[frontend/css]]
- [[cheatsheets/index|Cheatsheets]]