Question

我的问题听起来很简单，但我没有找到解决方案。

我使用Bootstrap网格系统并具有以下代码：

<div class="container">
    <div class="row">
        <div class="col-md-6">
            some content            
        </div>
        <div class="col-md-6">
            some more content </br></br>...         
        </div>
    </div>
</div>

我的问题是第二个div高于另一个，因为他包含更多内容。

如何将它们带到同一高度？

Answer 1

我认为Hakan的答案是可行的，但是将柱子的高度整体连接到行的高度是一个更好的解决方案吗？

$(document).ready(function() {
   var rowHeight = $('.row').height();
   $('.col-md-6').height(rowHeight);
});

这是一个JS小提琴：http://jsfiddle.net/rxSPG/

（我没有足够的代表发表评论，所以......）作为对表单元格解决方案的回应，它确实有效，但将div设置为display: table-cell;将破坏响应式引导程序样式（ divs不会叠加在较小的屏幕上。）我认为JS是唯一可行的方法。

Answer 2

您可以尝试在CSS中使用overflow属性。您可以剪辑内容甚至导致滚动条存在，以便可以访问看不见的内容。这可能是你想要的吗？

Answer 3

使用display：table / table-cell如果你不关心ie＆lt; = 7

.row{
    width: 100%;
    display: table;
}
.col-md-6{
    border: 1px solid;
    display: table-cell;
    height: 100%
}

jsfiddle：http://jsfiddle.net/LByZQ/

一个div-Container与另一个相同的高度

3 个答案: