2 colonne di uguale altezza - Twitter Bootstrap 2.0

Question

Beh, tutti sanno che il Bootstrap di Twitter è un ottimo strumento e rende molte cose più facili per chi, come me, non sa ancora molto dei CSS. Ma a volte può essere anche un problema.

Il fatto è: sto utilizzando un layout fisso a griglia di 12 colonne a 12 colonne con due colonne e volevo che entrambe le colonne avessero la stessa altezza. Il codice in questo momento è come questo:

<div class="container"> 
    <div class="content"> 
     <div class="row"> 
      <div class="span8 div-content"> 
       <div class="center95"> 
        <div id="notWrap"> 
         <div id="not"> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="span4 div-sidebar"> 
       <div class="center90"> 
        <div id="myPWrap"> 
         <div id="myP"> 
         </div> 
        </div> 
        <hr /> 
        <div id="otherPWrap"> 
         <div id="otherP"> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <footer id="bottom" class="footer"> 
     <p>&copy;</p> 
    </footer> 
</div> 

Come si può vedere, ci sono div senza contenuto, come "MYP", "otherP" e "non". Sono riempiti tramite Javascript, e la quantità di contenuti in essi memorizzati può variare e, a causa di ciò, in molte volte una colonna (le "colonne" qui sono rappresentate dal div con la classe "div-content" e dal div con la classe "div-sidebar") sarà più grande dell'altro (nel mio caso particolare, entrambe le colonne potrebbero essere "la più grande").

Ecco una foto, se aiuta:

In sostanza, la colonna di sinistra (Il <div class="span8 div-content"> nel codice) ha bisogno di essere delle stesse dimensioni della colonna di destra (Il <div class="span4 div-sidebar"> nel codice), e vice versa. Inoltre, se aiuta, la parte gialla è <div class="content"> e lo sfondo bianco è <div class="container">. Lo <div class="row"> è solo un contenitore delle due colonne e non ha colore.

So che il problema "colonne con stessa altezza" è un problema ricorrente per i programmatori Web, ma le soluzioni che ho provato finora non hanno funzionato. Non mi piace davvero la "soluzione Faux Column" perché, dato che sono un novizio in CSS, non volevo fare appello a una soluzione come questa. Se possibile, preferirei attenermi al puro CSS.

In anticipo, grazie per coloro che saranno disposti ad aiutare.

Answer 1

Quello che ha sempre lavorato per me è:

#myPWrap,#otherPWrap { 
    overflow:hidden; 
} 

#myP,#otherP { 
    margin-bottom: -99999px; 
    padding-bottom: 99999px; 
} 

Si può anche cercare di trasformare l'involucro in una tabella e il #myP in una col tavolo.

#myPWrap,#otherPWrap { 
display: table; 
} 

#myP,#otherP { 
display: table-cell; 
} 

Answer 2

ho risolto questo con un costume jQuery max plugin:

$.fn.max = function(selector) { 
    return Math.max.apply(null, this.map(function(index, el) { return selector.apply(el); }).get()); 
} 

Qui contenuti-box è il mio elemento di colonna interna, contenuto-contenitore è l'involucro che contiene le colonne:

$('.content-box').height(function() { 
    var maxHeight = $(this).closest('.content-container').find('.content-box') 
        .max(function() { 
        return $(this).height(); 
        }); 
    return maxHeight; 
}) 

Spero che questo aiuti.