Crea due colonne alla stessa altezza

Sto cercando di creare un design a 2 colonne (usando Twitter Bootstrap ) con 2 colonne di uguale altezza.

Prendiamo questo esempio:

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

Poiché .span2 è la più alta delle due colonne, rende .row-fluid per adattarsi alla sua altezza. Dopo aver letto questo articolo , mi aspettavo che l’impostazione min-height: 100% su .span10 lo facesse allungare fino alla massima altezza, ma non lo fa:

Immagine dello schermo

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

Perché? Qualsiasi soluzione per rendere .span10 allungare all’altezza del genitore, evitando di impostare un’altezza fissa, per mantenere questo design flessibile?

Prova questo:

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

notare che ho aggiunto display:table e display:table-cell ma ho anche cambiato i nomi dei selettori CSS in modo da ottenere la priorità necessaria.

 .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; } 

E il vecchio classico è la tecnica delle false colonne . Funziona perfettamente in ogni browser ed è facile da implementare.

Uno svantaggio però: è necessario aggiungere un’immagine di sfondo (e quindi un’altra richiesta, a meno che la codifica di base 64 non sia codificata ).

L’impostazione dell’altezza / altezza minima al 100% non è ansible su elementi a livello di blocco con “altezza automatica”.