在引导程序中使列具有相同的高度

我连续三列。 我希望所有三列都具有相同的高度（填满整个空白区域）

目前，它看起来像这样：

如您所见，左列是正确的高度。 中间和右边不是。

脚手架看起来像这样：

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

我试图给出100％的中间和右侧跨度高度，但这并不是这样。 任何人都可以指导我正确的方向吗？

我正在使用最新版本的Twitter Bootstrap

Answer 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/

编辑 ：

既然您在评论中说菜单总是最大的，您可以使用这个新示例： http ： //fiddle.jshell.net/E8SK6/5/

如果你不知道哪一个是最长的，也许这个post的答案更好。 它使用display：table-cell。 这是一个例子

Answer 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; } 

而这个标记

Answer 3

啊这是一个古老的问题。

如果在元素上设置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); }); 

Answer 4

今天，可以使用row-eq-height

链接： http ： //getbootstrap.com.vn/examples/equal-height-columns/