Cuando se diseña la estructura de una página web, se debe tomar la decisión de optar por un diseño de anchura fija o un diseño cuya anchura se adapta a la anchura de la ventana del navegador.
Sin embargo, la mayoría de las veces sería conveniente una solución intermedia: que la anchura de la página sea variable y se adapte a la anchura de la ventana del navegador, pero respetando ciertos límites. En otras palabras, que la anchura de la página no sea tan pequeña como para que no se puedan mostrar correctamente los contenidos y tampoco sea tan ancha como para que las líneas de texto no puedan leerse cómodamente.
CSS define cuatro propiedades que permiten limitar la anchura y altura mínima y máxima de cualquier elemento de la página. Las propiedades son max-width, min-width, max-height y min-height.
| Propiedad | max-width |
|---|---|
| Valores | unidad de medida | porcentaje | none | inherit |
| Se aplica a | Todos los elementos salvo filas y grupos de filas de tablas |
| Valor inicial | none |
| Descripción | Permite definir la anchura máxima de un elemento |
| Propiedad | min-width |
|---|---|
| Valores | unidad de medida | porcentaje | inherit |
| Se aplica a | Todos los elementos salvo filas y grupos de filas de tablas |
| Valor inicial | 0 |
| Descripción | Permite definir la anchura mínima de un elemento |
| Propiedad | max-height |
|---|---|
| Valores | unidad de medida | porcentaje | none | inherit |
| Se aplica a | Todos los elementos salvo columnas y grupos de columnas de tablas |
| Valor inicial | none |
| Descripción | Permite definir la altura máxima de un elemento |
| Propiedad | min-height |
|---|---|
| Valores | unidad de medida | porcentaje | inherit |
| Se aplica a | Todos los elementos salvo columnas y grupos de columnas de tablas |
| Valor inicial | 0 |
| Descripción | Permite definir la altura mínima de un elemento |
De esta forma, para conseguir un diseño de anchura variable pero controlada, se podrían utilizar reglas CSS como la siguiente:
#contenedor {
min-width: 500px;
max-width: 900px;
}Las propiedades que definen la altura y anchura máxima y mínima se pueden aplicar a cualquier elemento, aunque solamente suelen utilizarse para estructurar la página. En general, las propiedades más utilizadas son max-width y min-width, ya que no es muy habitual definir alturas máximas y mínimas.
Desafortunadamente, Internet Explorer 6 y las versiones anteriores no soportan ninguna de las cuatro propiedades sobre ningún elemento. Hasta que se incorpore en las nuevas versiones del navegador, es preciso recurrir a trucos que simulen el comportamiento de las propiedades:
max-width equivalente para Internet Explorer:
div {
max-width: 800px;
width: expression(document.body.clientWidth > 801? "800px": "auto");
}min-width equivalente para Internet Explorer:
div {
min-width:800px;
width: expression(document.body.clientWidth < 801? "800px": "auto" );
}max-height equivalente para Internet Explorer:
div {
max-height: 300px;
overflow: hidden;
height: expression(this.scrollHeight > 301? "300px" : "auto" );
}min-height equivalente para Internet Explorer:
div {
min-height:300px;
overflow: hidden;
height: expression(this.scrollHeight < 301? "300px" : "auto" );
}Los equivalentes para Internet Explorer han sido extraídos de: http://www.svendtofte.com/code/max_width_in_ie/