Características max-height en CSS

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 inicialnone
Aplicado aTodos los elementos, excepto los elementos en línea no reemplazados, las columnas de la tabla y los grupos de columnas.
HeredableNo
Móvil
Valor calculadoPorcentaje (%), 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ísticaChromeFirefoxIEÓperaSafari
Soporte básico1.01.07.07.01.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  widthheight 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.