Сделать столбцы одинаковой высоты в бутстрапе

У меня есть три столбца внутри строки. Я хочу, чтобы все три столбца имели одинаковую высоту (заполнение всего пробела)

В настоящее время он выглядит так:

enter image description here

Как вы можете видеть, левый столбец имеет правильную высоту. Где нет среднего и правого.

Леса выглядят следующим образом:

<div class="container">
    <div class="row">
    <div class="span3">
      -- menu --
    </div>
    <div class="span5">
     -- gray content --
    </div>
    <div class="span3">
     -- black content--
    </div>
    </div>
</div>

Я попытался дать среднюю и правую высоту диапазона 100%, но это не делает. Может ли кто-нибудь вести меня в правильном направлении?

Я использую последнюю версию Twitter Bootstrap

Ответы

Ответ 1

Вы можете решить это без JS. Просто используйте

bottom: 0;
top: 0;
position: absolute; /* The container must have position: relative */

Он делает магию:)

Пример, который я сделал: http://fiddle.jshell.net/E8SK6/1

Результат: http://fiddle.jshell.net/E8SK6/1/show/

Edit

Поскольку вы сказали в комментарии, что меню всегда самое большое, вы можете использовать этот новый пример: http://fiddle.jshell.net/E8SK6/5/

Если вы не знаете, какой из них самый длинный, может быть, ответ на этот поток лучше. Он использует display: table-cell. Здесь пример

Ответ 2

Я нашел это решение для bootstrap 3, которое отлично работает для меня

http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height

Он использует эти стили:

/* columns of same height styles */
.container-xs-height {
    display:table;
    padding-left:0px;
    padding-right:0px;
}
.row-xs-height {
    display:table-row;
}
.col-xs-height {
    display:table-cell;
    float:none;
}
@media (min-width: 768px) {
    .container-sm-height {
        display:table;
        padding-left:0px;
        padding-right:0px;
    }
    .row-sm-height {
        display:table-row;
    }
    .col-sm-height {
        display:table-cell;
        float:none;
    }
}
@media (min-width: 992px) {
    .container-md-height {
        display:table;
        padding-left:0px;
        padding-right:0px;
    }
    .row-md-height {
        display:table-row;
    }
    .col-md-height {
        display:table-cell;
        float:none;
    }
}
@media (min-width: 1200px) {
    .container-lg-height {
        display:table;
        padding-left:0px;
        padding-right:0px;
    }
    .row-lg-height {
        display:table-row;
    }
    .col-lg-height {
        display:table-cell;
        float:none;
    }
}
/* vertical alignment styles */
.col-top {
    vertical-align:top;
}
.col-middle {
    vertical-align:middle;
}
.col-bottom {
    vertical-align:bottom;
}

И эта разметка

<div class="container container-xs-height">
    <div class="row row-xs-height">
        <div class="col-xs-6 col-xs-height"></div>
        <div class="col-xs-3 col-xs-height col-top"></div>
        <div class="col-xs-2 col-xs-height col-middle"></div>
        <div class="col-xs-1 col-xs-height col-bottom"></div>
    </div>
</div>

Ответ 3

А это старый вопрос.

Если вы устанавливаете высоту 100% для элемента, родительу требуется высота набора, чтобы он мог уйти. Поскольку div.row имеет высоту жидкости, это не сработает.

Как бы это ни было:

Установите фиксированную высоту на div.row (возможно, это не очень хорошая идея, если вы хотите дизайн жидкости)

или

Используйте jQuery для этого:

HTML

<div class="row equalHeight">
    <div class="span3">
      -- menu --
    </div>
    <div class="span5">
     -- gray content --
    </div>
    <div class="span3">
     -- black content--
    </div>
</div>

JQuery

$('.equalHeight').each(function() {
  var eHeight = $(this).innerHeight();

  $(this).find('div').outerHeight(eHeight);
});