CSS height Media Feature

Definition and Usage

The height media feature tests the viewport height (or the page box for paged media). It is a range feature, so you also get min-height and max-height variants.

Use it when vertical space matters—compact chrome on short windows, taller heroes on tall screens. It is not the same as the height property, which sizes one element.

CSS Syntax

Modern range syntax also works where supported: @media (height >= 40rem).

Feature Values

How to Use height

Design for a typical height first, then adjust for short or tall viewports.

1. Ship a layout that works at a common desktop or phone height.
2. Use @media (max-height: …) to tighten spacing on short windows.
3. Use @media (min-height: …) to expand heroes or side panels when there is room.
4. Combine with width or orientation when both axes matter.

Live Preview

Resize this window’s height. The sample uses real @media (max-height: 500px) and (min-height: 501px) rules. The note shows the current viewport height from JavaScript.

CSS Examples

Each snippet focuses on the height media feature. Use Try It Yourself for a live editor—resize the preview pane height.

p {
  background: #fecaca;
}

@media (min-height: 40rem) {
  p {
    background: #dbeafe;
  }
}

p {
  background: #dbeafe;
}

@media (max-height: 500px) {
  p {
    background: #fecaca;
  }
}

p {
  background: #e2e8f0;
}

@media (min-height: 400px) and (max-height: 700px) {
  p {
    background: #bbf7d0;
  }
}

Key Takeaways