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

BCD tables only load in the browser