Como crear un alto de caja minimo y flexible a prueba de browsers?

La propiedad min-height nos permite definir un alto mínimo cuando creamos un elemento en nuestro HTML, para ser más preciso, digamos que tenemos otra vez el tipico diseño de 3 columnas, un header y un footer.

css_minitip1_1

Concentremonos en la columna 2, el alto de la misma sera igual al contenido dentro de ella, o sea:

css_minitip2_2

Ahora, si no tuviera contenido, entonces, la misma se reduciría completamente:

css_minitip2_3

Es aqui donde min-height nos ayudaría a definir un alto mínimo, de modo que si el contenido en la columna 2 es más pequeño que las columnas 1 y 3, aun asi, tendrían el mismo alto, ya que pondriamos el valor min-height de la columna 2 al mismo alto que las otras. Quiero hacer un parentesis aqui, para decir, que cualquier columna no crecerá en dependencia de si las demás crecen o no, eso es otra historia; lo que queremos lograr aqui, es que al menos la columna mas pequeña se empareje con las mas grandes, en caso de que lo sean. Por lo que con esto bastaría:

Notese el valor min-height de 300 pixeles asignado a la columna 2. Veriamos esto:

css_minitip2_4

Ahora, que pasaría si el contenido creciera demasiado, y llegara al tope de la columna 2 ? Fácil, la columna 2 crecerá mientras, que el contenido siga aumentando:

css_minitip2_5

Y que pasaría si el contenido se reduce menos, de nuestro min-height ? Entonces, la columna 2 se reducirá tambien pero solo hasta que alcanzé el valor que hemos fijado con la propiedad min-height de nuevo.

css_minitip2_4

Ahora viene la pregunta del siglo: funciona esto en Internet Explorer ? La respuesta es NO, min-height no funciona en IE 7 y posterior. Pero existe otra propiedad que funciona por error exactamente como min-height, adivinan ?

Si, es  height, aunque tiene una limitación. Si agregamos a nuestro código: min-height y height.

Esto funcionaria solo para Internet Explorer 7 y posterior, el cual hará que crezca la columna 2 si el contenido aumenta, y hace la función de min-height pero en el resto de los navegadores estandares no aumentará la columna 2. Entonces tenemos una problematica, si declaras min-height no funcionaría en Internet Explorer 7 y posterior, y si ponemos min-height junto con height, entonces, funcionaría pero solo para Internet Explorer 7 y posterior.

Pero…………..hay una solución que vengo usando hace mucho tiempo y que quizás muchos conocen:

Noten el height: auto !important; en la declaración de la columna 2. Esto hará que todos los navegadores se lleven bien, y funcionen como esperamos.

Pero notese que es muy importante ese mismo orden. Por que? Vamos a explicarlo min-height: 300px; en la primera linea le dice a los navegadores estandares que ese es su valor mínimo y que pueden crecer todo lo que gusten pasado ese valor, pero Internet Explorer lo ignorará. Luego en la tercera linea tenemos height: 300px lo cual, le dira a Internet Explorer, tu puedes crecer mas de 300px pero ese es tu alto mínimo, pero el resto de los navegadores estandares, no crecerán, ya que la propiedad height no se los permite, y necesitan la propiedad auto para poder hacerlo. Por eso lo ponemos en la segunda linea, por que al asignarle la propiedad !important, los navegadores estandares no leerán la tercera linea donde el height esta fijo, y Internet explorer leerá la segunda linea pero la tercera la sobreescribirá por que no entiende la declaración !important como el resto de los navegadores.

NOTA: Puede usarse con cualquier etiqueta HTML, no es solo para columnas.

Espero que les sea de utilidad. A mi me ha servido mucho, y creo, que lo uso para todo. Pueden enviarnos cualquier pregunta y con gusto las aclararemos.

2 Comentarios

  1. Fredd

    Gracias viejo, muy buena tu solución.

  2. alain

    Gracias a ti por visitar nuestra comunidad y comentar.

    Saludos.

Dejanos un comentario