CSS height Media Feature

What You’ll Learn

The height media feature targets the viewport’s vertical size. Adapt layouts for tall desktops, short laptop windows, and landscape phones with min-height and max-height queries.

Introduction

Most responsive tutorials focus on width — stacking columns on narrow phones. The height media feature adds another axis: the viewport height, or how tall the browser window is.

A user on a wide but short window (split-screen laptop, landscape phone with keyboard open) may need compact headers and scrollable content. A tall viewport can support full-screen heroes and spacious vertical rhythm.

Definition and Usage

Write @media (min-height: 600px) or @media (max-height: 400px) to apply styles when the viewport meets your height condition. Values use length units such as px, em, rem, or viewport units like vh.

📝 Syntax

Use min-height, max-height, or an exact height inside @media:

/* Viewport is at least 600px tall */
@media (min-height: 600px) {
  /* Styles for tall viewports */
}

/* Viewport is at most 400px tall */
@media (max-height: 400px) {
  /* Styles for short viewports */
}

/* Exact viewport height (rare) */
@media (height: 768px) {
  /* Matches only at exactly 768px height */
}

Feature Variants

• min-height — Matches when viewport height is greater than or equal to the value (tall screens).
• max-height — Matches when viewport height is less than or equal to the value (short screens).
• height — Matches an exact viewport height; rarely used because few users hit one precise pixel height.

height Media Feature vs height Property

height vs width Media Features

Basic Example

body {
  background-color: #dbeafe;
}

@media (min-height: 600px) {
  body {
    background-color: #dcfce7;
  }
}

@media (max-height: 400px) {
  body {
    background-color: #fee2e2;
  }
}

Default Value

There is no CSS default. You choose the threshold based on your layout needs. Prefer rem or vh for scalable breakpoints.

Syntax Rules

• Use length values: px, em, rem, vh, dvh.
• Combine with width: @media (min-width: 48rem) and (min-height: 32rem).
• max-height overrides min-height when both match — order matters in CSS cascade.
• Resize the browser vertically to test; DevTools device mode also supports height.
• Mobile browser chrome (address bar) can change effective height — consider dvh for elements.

Related Topics

• height property — set element height
• aspect-ratio — width-to-height ratio queries
• grid — layout capability detection

When to Use height

Reach for height-based media queries when vertical space drives the design:

• Full-viewport heroes — Expand hero sections on tall screens with min-height.
• Compact short windows — Shrink headers and padding when max-height is small.
• Landscape mobile — Limited vertical space even when width is large.
• Dashboard panels — Enable internal scrolling only when viewport is too short.
• Split-screen desktop — Adapt when the window is wide but not tall.

Examples Gallery

Practice the height media feature with background thresholds, full-height heroes, compact headers, and combined width-height queries.

body {
  background-color: #dbeafe;
}

@media (min-height: 600px) {
  body {
    background-color: #dcfce7;
  }
}

@media (max-height: 400px) {
  body {
    background-color: #fee2e2;
  }
}

.hero {
  padding: 2rem 1.5rem;
  background: #1e293b;
  color: #fff;
  text-align: center;
}

@media (min-height: 32rem) {
  .hero {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.site-header {
  padding: 1.25rem 1.5rem;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  font-size: 1.125rem;
  font-weight: 600;
}

@media (max-height: 500px) {
  .site-header {
    padding: 0.5rem 1rem;
    font-size: 0.9375rem;
  }
}

.layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 48rem) and (min-height: 32rem) {
  .layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}

💬 Usage Tips

• Test vertically — Drag the browser window shorter and taller, not just narrower.
• Use rem breakpoints — min-height: 32rem scales with user font settings.
• Pair with width — Avoid two-column layouts on wide-but-short viewports.
• Consider dvh — Use 100dvh for full-height sections on mobile browsers.
• Mobile landscape — max-height catches phones rotated sideways.

⚠️ Common Pitfalls

• Confusing with height property — Media query checks viewport; property sizes elements.
• Only using width queries — Short viewports need their own rules.
• Exact height matches — (height: 768px) rarely matches real users.
• Ignoring cascade order — Later rules win when min and max both match.
• Fixed vh on mobile — Address bar show/hide affects 100vh; prefer dvh.

♿ Accessibility

• Zoom and text size — Large text increases effective viewport needs; test with zoom.
• Scrollable content — Never hide essential content on short screens; allow scrolling.
• Focus visibility — Compact headers must still show visible focus outlines.
• Reduced motion — Height-based layout shifts should respect prefers-reduced-motion.
• Keyboard users — Full-height heroes should not trap focus or hide skip links.

💡 Best Practices