Haz dos columnas de la misma altura

Estoy tratando de hacer un diseño de 2 columnas (usando Twitter Bootstrap ) con 2 columnas de igual altura.

Tomemos este ejemplo:

  • Item 1
  • Item 2
  • Item 3
  • Item 4
test

Como .span2 es la más alta de las dos columnas, hace que .row-fluid estire para acomodar su altura. Después de leer este artículo , esperaba esa configuración min-height: 100% en .span10 lo haría estirar a la altura completa, pero no:

Captura de pantalla

http://jsfiddle.net/WTNeB/1/

¿Porqué es eso? ¿Alguna solución para hacer que .span10 estire a su altura original, evitando establecer una altura fija, para mantener este diseño flexible?

Prueba esto:

http://jsfiddle.net/WTNeB/2/

note que agregué display:table y display:table-cell pero también cambié los nombres del selector css para que tenga la prioridad necesaria.

 .row-fluid { border: 1px dotted gray; display: table; } .row-fluid .span2 { border: 1px solid blue; display: table-cell; float: none; } .row-fluid .span10 { min-height: 100%; border: 1px solid red; height: 100%; display: table-cell; float: none; } 

Y el viejo clásico es la técnica de columnas falsas . Funciona perfectamente en todos los navegadores y es fácil de implementar.

Una desventaja, sin embargo: debe agregar una imagen de fondo (y, por lo tanto, una solicitud más, a menos que esté en la base 64 codificando su fondo).

No es posible ajustar la altura / min-altura al 100% en los elementos de nivel de bloque que tienen “altura automática”.