2 DIV Контейнер с одинаковой высотой

Question

Я хочу получить ту же высоту на двух разных div, которые находятся вместе у одного из родителей div. Позвольте мне показать вам простой код, прежде чем я объяснить это подробно:

<div id="wrapper"> 
    <div id="box_one"> 
    ... 
    </div> 
    <div id="box_two"> 
    ... 
    </div> 
</div> 

#wrapper{ 
    width:1170px; 
    margin:0 auto; 
    text-align:left; 
} 
#box_one{ 
    width:860px; 
    background-color:#FCFCFC; 
} 
#box_two { 
    float:left; 
    width:310px; 
    background-color:#FCFCFC; 
} 

так вот как код смотреть в основной. Теперь позвольте мне решить проблему. Первый div#box_one будет иметь динамический контент - я не могу сказать, сколько это будет - то же самое для #box_two. Но я все равно хочу, чтобы обе команды div разделили одну и ту же высоту. min-height - это не полезное решение и установка обертки + body + html на height: 100%, и оба этих dov тоже не стоят никакой идеи, так как это приведет к сбою другого макета.

Так или нет, или мне нужно найти другой способ вместо двух div?

Answer 1

Live demo here (click).

Все, что вам действительно нужно display: table-cell.

.foo { 
    display: table-cell; 
    width: 49%; /* not exact, just for this example */ 
    vertical-align: top; 
} 

<div class="foo">Some stuff in here.</div> 
<div class="foo">Other stuff in here.</div> 

Answer 2

Лучше всего использовать несколько строк кода JQuery для того, результат является лучшим

$('.parent-div').each(function(){ 
     var highestBox = 0; 
     $('.child-div', this).each(function(){ 

      if($(this).height() > highestBox) 
       highestBox = $(this).height(); 
      }); 

      $('.child-div',this).height(highestBox); 
    });