height CSS Media-Feature

Die height CSS Media-Feature kann verwendet werden, um Stile basierend auf der Höhe des Viewports (oder der Seitenbox bei Seitendruck-Medien) anzuwenden.

Syntax

Die height-Eigenschaft wird als <length>-Wert angegeben, der die Höhe des Viewports darstellt. Es handelt sich um eine Bereichseigenschaft, was bedeutet, dass Sie auch die mit Präfix versehenen Varianten min-height und max-height verwenden können, um Mindest- bzw. Höchstwerte abzufragen.

Beispiele

HTML

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

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

Browser-Kompatibilität

Siehe auch

• Verwendung von Media Queries
• @media