CSS Viewport Units: vh, vw, vmin, vmax Explained

Viewport Units: vh, vw, vmin, vmax

These CSS units are based on viewport dimensions. This is useful for creating adaptive, "fluid" layouts.

Unit Overview

Example

.box {
  width: 50vmin;   /* will be 50% of smaller window side */
  height: 50vmax;  /* will be 50% of larger window side */
  background: lightcoral;
}

Such a block will adapt to screen orientation: when rotating the device, vmin/vmax change.

Application

• vh and vw — for fullscreen sections, blocks, slides.
• vmin — so blocks don't exceed the smaller side.
• vmax — for creating elements that stretch along the larger side (e.g., in horizontal layout).

Important for Mobile

• Mobile browsers change vh height when showing/hiding the address bar. To solve this problem:

Use CSS variables with JavaScript:

document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);

.full-height {
  height: calc(var(--vh, 1vh) * 100);
}