在寻找这个答案的时候发现了这个帖子。我刚刚做了一个小jQuery函数，希望这有助于，工作就像一个魅力:

JAVASCRIPT

var maxHeight = 0;
$('.inner').each(function() {
    maxHeight = Math.max(maxHeight, $(this).height());
});
$('.lhs_content .inner, .rhs_content .inner').css({height:maxHeight + 'px'});

HTML

<div class="lhs_content">
    <div class="inner">
        Content in here
    </div>
</div>
<div class="rhs_content">
    <div class="inner">
        More content in here
    </div>
</div>

使用jQuery

使用jQuery，您可以在一个超级简单的单行脚本中完成这个任务。

// HTML
<div id="columnOne">
</div>

<div id="columnTwo">
</div>

// Javascript
$("#columnTwo").height($("#columnOne").height());

使用CSS

这个更有趣一点。这种技术被称为人造柱。或多或少，你并没有设置实际的高度，但你设置了一些图形元素，让它们看起来一样高。

这是一个很多人都遇到过的常见问题，但幸运的是，一些聪明的人，如埃德·艾略特在他的博客上，已经在网上发布了他们的解决方案。

基本上你要做的就是通过添加padding-bottom: 100%使两个div /column都非常高，然后使用margin-bottom: -100%“欺骗浏览器”认为它们没有那么高。埃德·艾略特在他的博客上有更好的解释，其中也有很多例子。

.container { 溢出:隐藏; ｝ .column { 浮:左; 保证金:20 px; 背景颜色:灰色; padding-bottom: 100%; margin-bottom: -100%; ｝ < div class = "容器" > < div class = "列" > 一些内容!< br > 一些内容!< br > 一些内容!< br > 一些内容!< br > 一些内容!< br > < / div > < div class = "列" > 某物 < / div > < / div >

<div>

<div style="border:1px solid #cccccc; float:left; min-height:200px;">

Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>

</div>

<div style="border:1px solid #cccccc; float:left; min-height:200px;">

Some content!

</div>

</div>

我在这里所做的是将高度更改为min-height，并给它一个固定的值。如果其中一个被调整大小，另一个将保持相同的高度。不知道这是不是你想要的

Flexbox

对于flexbox，它是一个单一的声明:

.row { 显示:flex;/*儿童身高相等*/ ｝ .col { flex: 1;/*另外，等于宽度*/ 填充:1 em; 边界:固体; ｝ < div class = "行" > <div class="col">我与你同在，我与你同在</div> <div class="col">我爱你，我爱你，我爱你。</div> .</div> .</div> .</div> < / div >

旧浏览器可能需要前缀，请参阅浏览器支持。

如果你不介意其中一个divs是一个主人，并口述两个divs的高度，有这个:

小提琴

无论如何，右边的div会扩展或压缩&溢出来匹配左边的div的高度。

两个div都必须是容器的直接子节点，并且必须在容器中指定它们的宽度。

相关的CSS:

.container {
    background-color: gray;
    display: table;
    width: 70%;
    position:relative;
}

.container .left{
    background-color: tomato;
    width: 35%;
}

.container .right{
    position:absolute;
    top:0px;
    left:35%;
    background-color: orange;
    width: 65%;
    height:100%;
    overflow-y: auto;
}