Alto mínimos para IE6 (y el resto, claro)

Primer aporte procedente del [videocast][1]. Como prometido, este artículo será un corto pero efectivo método para obtener la propiedad min-height en todos los browsers, especialmente para IE6 que no lo aplica para nada.

Esta propiedad lo que hace es aplicar un alto mínimo a un elemento. Por ejemplo, queremos que una caja tenga un alto de 200px. Como sabemos, los elementos que estén dentro de esta caja se mostrarán hasta que alcancen esos 200 pixeles, y pasado eso si se agregan más elementos la caja no va a crecer, sino que permanecerá fija. Con min-height lo que lograremos es que el alto sea de un mínimo de 200px, y que puede crecer lo que sea necesario; al contrario de max-height, que lo que hace es dar un tope al alto de la caja (o sea, nuestro contenido puede crecer hasta un alto máximo donde la caja dejará de crecer).

Bueno, al grano. En este sitio, necesitaba una caja estuviera fija en un alto mínimo, (según el diseño), ya que si el contenido superior a éste creciera, esta caja pudiera moverse nuevamente, pero siempre y cuando alcanzara este alto mínimo.

Como se puede ver en la imagen 1, se construyó el menu lateral con un min-height de 175 pixeles. Así, la caja del banner se alineaba con un párrafo del texto del contenido (esto es sólo un ejemplo, claro. La idea original era otra.).

![Imagen 1: alto mínimo][2]

Ahora, en la imagen 2 se puede ver qué pasa si este menú tiene subitems desplegables (como en [artículo de árbol de navegación][3], por ejemplo). Si se hubiera dado un height fijo de 175 pixeles a ese menú, lo que hubiera pasado es que la caja no hubiera crecido, y los textos se habrían pasado de largo, mientras que la caja quedaría estática. Con min-height, lo que pasa es que la caja menú se queda fija hasta que sus elementos interiores alcancen ese alto mínimo, y de ahí la caja sigue creciendo.

![Imagen 2: alto mínimo][4]

¿Divertido, no?

Pues no tanto. Como dije, IE6 no soporta esta propiedad tan útil (como tantas otras). La solución: un simple truco de CSS que involucra [!important][5] y cómo IE6 no lo interpreta como debería.

ul#menu {
     height: auto!important; /* para los browsers buenos */
     height: 175px; /* para IE5+ */
     min-height: 175px; /* para los browsers buenos */
}

La primera declaración (height: auto!important) no lo leerá IE5+ ya que no soporta !important, así que deja de leer esta línea y pasa a la segunda: height: 175px. Los otros browsers pasan en seguida a leer la tercera: min-height: 175px e IE5+ no lo interpretará, lo que hará que todos queden felices y contentos con su alto mínimo funcionando.

[Ver ejemplo][6]{.verejemplo}

No fue tan corto a fin de cuentas. Pero sí efectivo.

[1]: http://www.csslab.cl/2007/10/03/videocast-1-layout-compuesto/ “Leer artículo en CSSLab “Videocast 1: layout compuesto”” [2]: http://www.csslab.cl/wp-content/uploads/2007/10/min-height.gif [3]: http://www.csslab.cl/2007/09/25/convirtiendo-listas-en-arboles/ “Leer artÍculo en CSSLab “Convirtiendo Listas en Árboles”” [4]: http://www.csslab.cl/wp-content/uploads/2007/10/min-height2.gif [5]: http://www.csslab.cl/2007/06/05/la-verdadera-importancia/ “Leer artÍculo en CSSLab “La verdadera !importancia”” [6]: http://www.csslab.cl/ejemplos/min-height.html “Ver ejemplo en CSSLab de “Alto mínimos para IE6"”