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
logotipo bisign
Resumen de privacidad

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.

Para más información, por favor echa un vistazo a nuestra política de privacidad