Div高度等于另一个div max-height

Question

我有3个div：

<div id="main">
    <div id="one"></div>
    <div id="two"></div>
</div>

• Div“one”包含一些内容，因此其高度例如为300px。
• Div“two”包含更多或更少的内容，因此其高度例如为400px。
• 两个内容都在变化，它不是静态的，所以我无法计算
  手动高度。
• div“2”的样式也将包含“overflow-y：scroll;”

如何创建div“two”与div“one”相同的高度可以更小或更大？

这是一个快速草图：

Answer 1

如果将div“one”和div“two”都设置为高度为100％，则可以通过外部div的样式控制它们的高度，并保证它们始终具有相同的高度。

如果您总是希望div“two”与div“one”或更短一样高，那么这里有一些JavaScript代码可以帮助您：

document.getElementById("two").style.maxHeight = document.getElementById("one").style.height;

Answer 2

使用Javascript，您可以执行以下操作：

document.getElementById("two").style.height = document.getElementById("one").clientHeight;

Answer 3

通过Javascript http://jsfiddle.net/D6bMJ/1/（自动将#main高度设置为#one高度） 或CSS，手动定义#main的高度，该高度在＃one和#two之间最高。 ：http://jsfiddle.net/D6bMJ/2/（#two有高度：100％，所以高度与它的父级相同）。

Answer 4

如果div one高于div 2而相反（使用jQuery），这将同时工作，并且每次调整窗口大小时都会触发（对于流体布局）：

resize_objects();
$(window).resize(resize_objects);

function resize_objects(){
var $a = $('#one').height(), $b = $('#two').height();

if($a > $b) {
    //#one is higher than #two
    $("#two").css("height",$a);
}
else {
    //#two is higher than #one
    $("#one").css("height",$b);
    }
}