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

Ну, все знают, что Twitter Bootstrap - отличный инструмент и облегчает многое для тех, кто, как и я, мало что знает о 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>

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

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

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

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

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

Ответ 1

Я всегда работал у меня:

#myPWrap,#otherPWrap {
  overflow:hidden;
}

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

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

#myPWrap,#otherPWrap {
 display: table;
}

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

Ответ 2

Я решил это с помощью настраиваемого плагина jQuery max:

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

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

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

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