2 столбца равной высоты - Twitter Bootstrap 2.0

Question

Ну, все знают, что Bootstrap Twitter - отличный инструмент и облегчает многое для тех, кто, как и я, еще мало знает о CSS. Но иногда это тоже может быть проблемой.

Дело в том, что я использую фиксированный макет с 9-кратной сеткой с 12 колонками с двумя столбцами, и я хотел, чтобы оба столбца имели одинаковую высоту. Код прямо сейчас выглядит так:

<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> 

Как вы можете видеть, есть дивы без содержания, как «MyP», «otherP» и «не». Они заполняются через Javascript, и количество содержимого, хранящегося в них, может варьироваться, и из-за этого во многих случаях столбец (здесь «столбцы» представлены div с классом «div-content» и div с классом «div-sidebar») будет больше, чем другой (в моем конкретном случае оба столбца могут быть «более крупными»).

Вот картинка, если она помогает:

В основном, левая колонка (The <div class="span8 div-content"> в коде) должна быть таким же размером правого колонка (The <div class="span4 div-sidebar"> в коде), и вице- наоборот. Кроме того, если это помогает, желтая часть - <div class="content">, а на белом фоне - <div class="container">. <div class="row"> - это просто контейнер из двух столбцов и не имеет цвета.

Я знаю, что проблема с «столбцами с одинаковой высотой» является периодической проблемой для веб-программистов, но решения, которые я пробовал до сих пор, не сработали. Мне действительно не понравилось бы решение «Faux Column», потому что, поскольку я новичок в CSS, я не хотел обращаться к обходному пути, подобному этому. Если возможно, я предпочел бы придерживаться чистого CSS.

Заранее благодарим за тех, кто захочет помочь.

Answer 1

Тот, который всегда работал для меня:

#myPWrap,#otherPWrap { 
    overflow:hidden; 
} 

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

Вы также можете попытаться превратить обертку в таблицу и #myP в таблицу цв.

#myPWrap,#otherPWrap { 
display: table; 
} 

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

Answer 2

Я решил эту проблему с помощью пользовательского JQuery макс плагин:

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

Здесь контент-бокс мой внутренний элемент столбца содержимого контейнера является оболочкой, которая содержит столбцы:

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

Надеюсь, что это поможет.