CSS Viewport Units: vw, vh, vmin and vmax

Viewport units are a percentage of the browser window (“viewport”) size.

So 100vw is the full window width and 50vh is half its height.

1
2
3
4
5

.hero {
  min-height: 100vh;   /* at least as tall as the screen */
  display: grid;
  place-items: center;
}

That is a full-screen intro section in three lines.

Seeing them in action

The Result panel is its own small window, so viewport units here refer to it, not the whole page.

1
2
3
4
5
6
7

<style>
  body { margin: 0; }
  .bar { height: 10vh; background: #d94a00; color: #fff; padding: 4px; }
  .square { width: 30vmin; height: 30vmin; background: #1a5276; margin-top: 8px; }
</style>
<div class="bar">10vh tall</div>
<div class="square"></div>

The square stays a square and is always 30% of the smaller side. Resize the browser window to see what happens in your own page.

Good uses

• Hero sections: min-height: 100vh.
• Text that scales with the screen. See clamp().
• vmin for shapes that must stay square on any orientation.

Mobile browsers and dvh

On phones, the address bar slides away when scrolling, so 100vh can be taller than the visible area, and the bottom of your section hides behind the browser’s toolbar. Modern browsers have dvh (“dynamic viewport height”), which follows the visible area:

1

.hero { min-height: 100vh; min-height: 100dvh; }

The first line is the fallback for older browsers.