
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.
- ¿Qué es el código CSS y en que se utiliza?
- Característica background-attachment en CSS
- Característica background-blend-mode en CSS
- Característica background-clip en CSS
- Característica background-color en CSS
- Característica background-image en CSS
- Característica background-origin en CSS
- Característica background-position en CSS
- Característica background-repeat en CSS
- Característica background-size en CSS
- Característica border-bottom en CSS
- Característica border-bottom-color en CSS
- Característica border-bottom-style en CSS
- Característica border-bottom-width en CSS
- Característica border-color en CSS
- Característica border-image en CSS
- Característica border-image-outset en CSS
- Característica border-image-repeat en CSS
- Característica border-image-slice en CSS
- Característica border-image-source en CSS
- Característica border-left-color en CSS
- Característica border-left-style en CSS
- Característica border-left-width en CSS
- Característica border-right en CSS
- Característica Box Sizing en CSS
- Característica box-shadow en CSS
- Característica de Border en CSS
- Característica de Opacity en CSS
- Característica del Background en CSS
- Característica del Color en el CSS
- Característica del CSS Bottom
- Característica del CSS Display
- Característica del Margin en CSS
- Característica del Overflow en CSS
- Característica del Padding en CSS
- Características align-content en CSS
- Características align-items en CSS
- Características align-self en CSS
- Características border-bottom-left-radius en CSS
- Características border-bottom-right-radius en CSS
- Características border-image-width en CSS
- Características border-left en CSS