Intereting Posts

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

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

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

введите описание изображения здесь

Как вы можете видеть, левая колонка – это правильная высота. Там, где нет среднего и правого.

Леса этого вида выглядят так:

-- menu --
-- gray content --
-- black content--

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

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

Вы можете решить это без 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/

Изменить :

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

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

Я нашел это решение для 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; } 

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

 

Ах, это давняя проблема.

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

Путь вокруг этого будет:

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

или же

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

HTML

 
-- menu --
-- gray content --
-- black content--

JQuery

 $('.equalHeight').each(function() { var eHeight = $(this).innerHeight(); $(this).find('div').outerHeight(eHeight); }); 

Сегодня возможно с row-eq-height

ССЫЛКА: http://getbootstrap.com.vn/examples/equal-height-columns/