CSS Academy · Lesson

Viewport Units: vw vh dvh

Size elements relative to the browser viewport using vw, vh, and modern dvh units.

Viewport Units: vw vh dvh is a free CSS Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What are Viewport Units?

Viewport units are relative to the size of the browser viewport (the visible area of the browser window). They enable layouts and typography that scale with the available screen space.

vw — Viewport Width

1vw = 1% of the viewport width. 100vw fills the full viewport width. Useful for full-width elements without percentage complications.

.hero {
  width: 100vw;
  max-width: 100%; /* prevent horizontal scroll from borders */
}

vh — Viewport Height

1vh = 1% of the viewport height. 100vh fills the full viewport height. Classic for full-screen hero sections and modals.

.fullscreen {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

The Mobile 100vh Problem

On mobile browsers, the viewport height changes as the browser UI (address bar) shows/hides during scroll. 100vh can include or exclude the browser chrome inconsistently, causing content to be partially hidden.

dvh — Dynamic Viewport Height

dvh (dynamic viewport height) dynamically updates to reflect the actual visible height after the browser UI adjusts. It solves the mobile 100vh problem.

.mobile-hero {
  min-height: 100dvh; /* accurate on mobile */
}

svh and lvh

CSS also provides svh (small viewport height — excludes browser UI always) and lvh (large viewport height — as if UI is hidden). These allow fine control over mobile viewport behavior.

Fluid Typography with vw

Using vw for font-size creates type that scales with the screen:

h1 {
  font-size: clamp(1.5rem, 4vw, 4rem);
  /* minimum 1.5rem, fluid 4vw, max 4rem */
}

Viewport-Width Limitations

100vw includes the scrollbar width on desktops. This causes horizontal overflow if used carelessly. Prefer width: 100% on block elements, reserving vw for specific cases.

vmin and vmax

1vmin = 1% of the smaller viewport dimension (width or height). 1vmax = 1% of the larger. Useful for square containers that adapt to orientation changes.

.square {
  width: 50vmin;
  height: 50vmin;
}

svw, lvw, dvw — Width Variants

Like height variants, CSS provides svw, lvw, and dvw for width. The dynamic variants (dvw, dvh) are the most useful on mobile.

Practical Patterns

Common viewport unit patterns:

min-height: 100dvh — full-screen mobile-safe sections
height: 100svh — fixed UI panels
font-size: clamp(1rem, 2.5vw, 2rem) — fluid headings
width: min(800px, 90vw) — safe-width containers

Quick Check

Why is dvh preferred over vh for full-screen mobile sections?

Recap

vw and vh are 1% of viewport width/height. On mobile, vh is unreliable due to the browser chrome. Use dvh for dynamic, mobile-accurate full-screen layouts. vmin and vmax respond to the smaller/larger viewport dimension.

Frequently asked questions

Is the “Viewport Units: vw vh dvh” lesson free?

Yes — the full text of “Viewport Units: vw vh dvh” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Viewport Units: vw vh dvh”?

Size elements relative to the browser viewport using vw, vh, and modern dvh units. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Viewport Units: vw vh dvh” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to CSS Academy