Столбцы с равной высотой с бутстрапом 3 при сохранении заполнения колонки

Question

У меня есть обычная настройка Bootstrap 3 CSS. Я хочу применить одну и ту же высоту к столбцам внутри строки и смотрю на использование display:table и display:table-cell. Этот метод работает, но, естественно, кажется, что применяется вертикальное дополнение к столбцам с меньшим количеством контента.

Возьмите этот HTML, например:

<div class="row"> 
    <div class="col-xs-4"> 
     <div class="block"> 
      Content for block<br /> 
      Some more content<br /> 
      And a bit more<br /> 
      Last bit 
     </div> 
    </div> 
    <div class="col-xs-8"> 
     <div class="block"> 
      Content for block<br /> 
      Only some more content 
     </div> 
    </div> 
</div> 

Тогда этот CSS:

.row { 
    display: table; 
    width: 100%; } 

.row > div { 
    float: none; 
    display: table-cell; 
    vertical-align: top; } 

.block { 
    height: 100%; 
    background: red; } 

Теперь столбцы действительно имеют одинаковую высоту, но .block, который имеет красный фон не отражает это , потому что второй столбец имеет нижнее дополнение, которое я не могу удалить.

Смотрите эту скрипку для примера: http://jsfiddle.net/cyan8fjz/

Есть ли решение, чтобы получить мой .block использовать полный height:100%? В идеале я не хочу абсолютно позиционировать .block из-за левого и правого заполнения на столбцах (которые могут меняться при разных разрешениях экрана).

Примечание. Я не включил Bootstrap CSS в свой пример выше, но у меня есть скрипка. Предположим, что это актуально и включено во все примеры.

Answer 1

Вы можете использовать как это 'padding-bottom: 1000em; margin-bottom: -1000em; трюк.

Вот пример: Link