事業部的高度等於另一個DIV最大高度

Question

我有3個div的：

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

• 格「一個」包含一些內容，所以它的高度爲300像素爲例。
• Div「two」包含更多或更少的內容，例如它的高度爲400px。
• 兩個內容都在變化，它不是靜態的，所以我無法手動計算
  高度。
• div「two」的風格也會包含「overflow-y：scroll;」

如何將div「two」創建爲與div「one」相同的高度，可以更小或更大？

這裏是一個速寫：

Answer 1

使用JavaScript，你可以這樣做：

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

Answer 2

如果同時設置格「一個」和格「兩個」有100％的高度，您可以通過控制兩者的高度外部div的樣式，並保證它們始終具有相同的高度。

如果你總是希望格「兩節」，以高達格「一個」 或更短，這裏的一些JavaScript代碼，可以幫助你：

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

Answer 3

通過JavaScript http://jsfiddle.net/D6bMJ/1/（自動設置#main高度與#one高度） 或CSS，手動定義一個高度這將是#one和#two之間最高的#main。 ：http://jsfiddle.net/D6bMJ/2/（#two有高度：100％，所以它的父母身高相同）。

Answer 4

這將工作，如果雙方的div一個高則DIV兩個相反的（用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); 
    } 
}