Html 一个div容器与另一个容器高度相同

Html 一个div容器与另一个容器高度相同,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我的问题听起来很简单,但我没有找到解决办法 我使用引导网格系统,代码如下: <div class="container"> <div class="row"> <div class="col-md-6"> some content </div> <div class="col-md-6"> some more

我的问题听起来很简单,但我没有找到解决办法

我使用引导网格系统,代码如下:

<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比另一个div高,因为它包含更多的内容


如何使它们达到相同的高度?

您可以尝试在CSS中使用overflow属性。您可以剪辑内容,甚至可以使滚动条出现,以便可以访问看不见的内容。这就是您想要的吗?

我认为Hakan的答案可行,但将列的高度与行的高度作为一个整体联系起来可能是更好的解决方案

$(document).ready(function() {
   var rowHeight = $('.row').height();
   $('.col-md-6').height(rowHeight);
});
这是一把JS小提琴:


(我没有足够的rep来评论,所以…)作为对表格单元格解决方案的响应,它确实有效,但将div设置为
display:table cell
将破坏响应引导样式(div不会堆叠在较小的屏幕上)。我认为JS是唯一可靠的方法。

使用display:table/table cell如果你不关心IES,也许你可以发布一些CSS?显示一个JSFIDLE以便我们可以编辑它。没有CSS。仅仅是Bootstrap v3.1.1中的CSS文件-就是一个很好的jQuery插件,可以实现这一点。如果我使用jQuery,我可以编写一个自己的3行javascript,读取较大的一行的高度,并将其添加到较小的一行中。但我只想使用css。有什么想法吗?没有sry,我只是希望我的div具有相同的高度:)您可以使用最大高度:?px。也许我很困惑,但我明白你只是想让两个div的高度相同吗?如果真的那么简单,试试高度:?px;样式元素,如果不这样做,请尝试上面列出的最大高度。
.row{
    width: 100%;
    display: table;
}
.col-md-6{
    border: 1px solid;
    display: table-cell;
    height: 100%
}