Altura

Las CSS media feature (consulta de medios) height puede ser usada para aplicar estilos basados en la altura del viewport (o la caja de la página, para paged media).

Sintáxis

La característica height es especificada como un valor <length> representando la altura de la vista (viewport). Es una característica en rangos, lo que siginifica que puede ser prefijada con las variantes min-height y max-height para consultar valores mínimos y máximos, respectivamente.

Ejemplo

HTML

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

CSS

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

/* Altura mínima */
@media (min-height: 25rem) {
  div {
    background: yellow;
  }
}

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

Resultado

Especificaciones

Especificación Estado Comentario
Media Queries Level 4
La definición de 'height' en esta especificación.
Candidate Recommendation El valor ahora puede ser negativo, en cuyo caso se calcula como negativo.
Media Queries
La definición de 'height' en esta especificación.
Recommendation Definición inicial. El valor debe ser positivo.

Compatibilidad con navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
height media featureChrome Soporte completo 1Edge Soporte completo 12Firefox Soporte completo 2IE Soporte completo 9Opera Soporte completo SiSafari Soporte completo 3WebView Android Soporte completo ≤37Chrome Android Soporte completo 18Firefox Android Soporte completo 4Opera Android Soporte completo SiSafari iOS Soporte completo 1Samsung Internet Android Soporte completo 1.0

Leyenda

Soporte completo  
Soporte completo