| Definición | Limita la altura máxima de los elementos de bloque |
|---|---|
| Valores permitidos | Uno y sólo uno de los siguientes valores: |
| Si se utilizan porcentajes, hace referencia a la altura del elemento en el que se encuentra | |
| Valor inicial | none |
| Se aplica a | Todos los elementos, salvo los elementos en línea que no sean imágenes, las filas de tabla y los grupos de filas de tabla. |
| Válida en | medios visuales |
| Se hereda | no |
| Definición en el estándar | w3.org/TR/CSS21/visudet.html#propdef-max-height |
Ejemplos de uso
La propiedad max-height es una de las propiedades CSS menos utilizadas, ya que normalmente se fijan las anchuras de los elementos y se deja que el navegador calcule automáticamente la altura de cada elemento de forma que quepan sus contenidos.
En el siguiente ejemplo, los dos <div> tienen establecida una anchura fija. Además, el segundo <div> tiene establecida una altura máxima mediante la propiedad max-height: 100px:
Como su anchura es fija, el navegador ajusta la altura de cada <div> hasta que quepan todos sus contenidos. El primer <div> no tiene ninguna restricción en su altura, por lo que el navegador muestra correctamente los contenidos en su interior.
Sin embargo, la altura necesaria para el segundo <div> es mayor que la altura máxima permitida, por lo que sus contenidos se desbordan.
El desbordamiento de los contenidos se puede controlar mediante la propiedad overflow.
La propiedad max-height no admite valores negativos y el valor none se puede utilizar para no limitar la altura máxima de un elemento. Si se utilizan porcentajes, su referencia es la altura del elemento contenedor. Si este elemento contendor no tiene establecida su altura de forma explícita y el elemento no está posicionado de forma absoluta, el valor de porcentaje se ignora y se sustituye por el valor none.
El navegador Internet Explorer 6 no incluye esta propiedad, por lo que se debe utilizar un truco que hace uso de CSS y JavaScript para simular el comportamiento de la propiedad max-height:
#contenedor {
max-height: 300px;
overflow: hidden;
height: expression(this.scrollHeight > 301? "300px": "auto");
}El ejemplo anterior hace uso de una función llamada expression() que sólo funciona en los navegadores de tipo Internet Explorer (desde su versión 5). Esta función permite establecer una medida utilizando expresiones matemáticas o mediante código JavaScript.
En este caso, se utiliza JavaScript para establecer de forma dinámica la altura del elemento #contenedor. Si la altura de este elemento (obtenida mediante this.scrollHeight) es mayor que 301px, se establece su altura a 300px. En cualquier otro caso, se deja que el navegador calcule automáticamente la altura necesaria mediante el valor auto.
El principal inconveniente de utilizar la función expression() es que el código CSS resultante no es válido según el estándar oficial y por tanto, no supera satisfatoriamente el proceso de validación de herramientas como el validador de CSS del W3C
Por otra parte, establecer medidas mediante operaciones matemáticas puede resultar muy útil para tener un control preciso cuando se utilizan unidades como em y porcentajes. Por este motivo, la futura versión CSS 3 incluirá una función llamada calc() cuyo funcionamiento es idéntico a expression().
El siguiente ejemplo muestra el uso de calc() para establecer la anchura de un elemento mediante una operación matemática compleja:
#contenedor {
float: left;
margin: 1em; border: solid 1px;
width: calc(100%/3 - 2*1em - 2*1px);
}La anchura del elemento #contenedor anterior se establece a una tercera parte del sitio disponible (100%/3) y después se le resta el sitio que ocupan los dos márgenes laterales de 1em de anchura cada uno (2*1em) y el espacio ocupado por los dos bordes laterales de 1px de anchura cada uno (2*1px).