Características max-height en CSS

La propiedad max-height en CSS establece la altura máxima de un elemento y evita que el valor usado de la propiedad height exceda el valor especificado en la propiedad max-height.

Funciones max-height css

Valor inicial	`none`
Aplicado a	Todos los elementos, excepto los elementos en línea no reemplazados, las columnas de la tabla y los grupos de columnas.
Heredable	No
Móvil	Sí
Valor calculado	Porcentaje (%), longitud absoluta o palabra reservada `none`.

/* <length> longitudes */ 
max-height:  3.5em;
/* <porcentaje> porcentajes */ 
max-height:  75%;
/* palabras reservadas */ 
max-height:  none;
/* valores globales */ 
max-height: inherit;
max-height: initial;
max-height: unset;

La propiedad max-height tiene prioridad sobre la propiedad height, pero la propiedad min-height tiene prioridad sobre max-height.

Ejemplos y aplicaciones en código

En el siguiente ejemplo, usaremos un elemento cuya <div> altura sea igual 500px pero max-height no 50vh mayor que el valor de la propiedad (es decir, el 50% de la altura de la ventana gráfica):

< div > 
Contenido de texto
</ div >

Código CSS:

div {
  height: 100px;
  max-height: 50vh;
}

Tenga en cuenta que si disminuye la altura de la ventana del navegador, la altura del elemento anterior disminuirá, porque la altura de la ventana gráfica ha disminuido. Si el contenido no encaja dentro del elemento, el navegador buscará cuál es el valor de la propiedad overflow para saber qué comportamiento implementar.

Soporte de navegadores

Característica	Chrome	Firefox	IE	Ópera	Safari
Soporte básico	1.0	1.0	7.0	7.0	1.0

Características generales

none

No hay una altura máxima para este artículo.

<length>

Determine la altura máxima en longitudes absolutas.

<percentage>

Especifica la altura máxima como porcentaje de la altura del elemento de bloque que contiene el elemento actual. Si la altura de ese elemento no se especifica claramente, el valor porcentual se trata como cero.

Estructura max-height css

max-height: <length> | <percentage> | none;

Consulte también

La página de cada una de las propiedades width, height que se encarga de configurar las dimensiones del elemento.
La página de propiedades min-height que establece la altura mínima del elemento.
En la página de propiedades max-width que establece el ancho máximo del elemento.
La página de propiedades min-width que establece el ancho mínimo del elemento.