max-height

Índice

Definición de .max-height aplicado en CSS

La propiedad .max-height en CSS se usa para establecer la altura máxima de un elemento especificado. Los autores pueden usar cualquiera de los valores de longitud siempre que sean un valor positivo. .max-height anula la altura, pero Min-Weight siempre anula .max-height.

Ejemplo de empleo de la propiedad max-height

Si te gustaría emplear esta propiedad de CSS en tu hoja de estilos, hazlo de esta forma:

.wrapper {
  height: 100%;     /* full height of the content box */
  max-height: 20em; /* requires an absolute value for height. */
}

.wrapper {
  height: 50px;
  max-height: 20px; /* Will be AT MOST 20px tall : overrides height */
}

.wrapper {
  min-height: 400px; /* overrides height and max-height */
  height: 200px;
  max-height: 300px;
}

Sintaxis de .max-height en CSS

max-height: none|length|initial|inherit;

Valores

Valor Descripción Manifestación
ninguna Sin altura máxima. esto es por defecto
longitud Define la altura máxima en px, cm, etc.
% Define la altura máxima en porcentaje del bloque contenedor
inicial Establece esta propiedad en su valor predeterminado.
heredar Hereda esta propiedad de su elemento principal.

Exploradores compatibles con .max-height

Los números de la tabla especifican la primera versión del navegador que es absolutamente compatible con la propiedad.

Los números seguidos de -webkit- detallan la primera versión que funcionó con un prefijo.

PropertyChromeInternet Explorer / EdgeFirefoxSafariOpera
max-width 1.0 7.0 1.0 2.0.2 7.0

Referencias técnicas

Echa un vistazo a estas otras propiedades de CSS

¿Necesitas ayuda para crear tu Web?

Cuéntanos de que trata y te asesoraremos sin compromiso