height

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

Das height- CSS Media-Feature kann verwendet werden, um Styles basierend auf der Höhe des Viewports (oder der Seitenbox bei Paged Media) anzuwenden.

Syntax

Das height-Feature wird als <length>-Wert angegeben, der der Höhe des Viewports entspricht. Es handelt sich um ein Bereichsfeature, was bedeutet, dass Sie auch die Präfixvarianten min-height und max-height verwenden können, um Mindest- bzw. Höchstwerte abzufragen.

Beispiele

HTML

html

<div>Watch this element as you resize your viewport's height.</div>

CSS

css

/* Exact height */
@media (height: 360px) {
  div {
    color: red;
  }
}

/* Minimum height */
@media (min-height: 25rem) {
  div {
    background: yellow;
  }
}

/* Maximum height */
@media (max-height: 40rem) {
  div {
    border: 2px solid blue;
  }
}

Ergebnis

Spezifikationen

Specification
Media Queries Level 4 # height