如何自動增加div的高度，因爲另一個div的高度增加？

Question

這裏是我想要的東西......

<div style="width:1000px;"> 

    <div style="float:left; width:300px; height:auto;"> </div> 
    <div style="float:right; width:700px; height:auto;"> </div> 

</div> 

我想的是，如果第二個DIV高度的增加，第三DIV的高度也應該自動增加...

總之， （第二DIV高度=第三個DIV高度）

Answer 1

您可以使用JavaScript獲得元素的高度，然後使用這個值設置其他元素的高度，你可以使用jQuery在這裏看到：

var height = $(".div1").height(); 

而且，如果你的第一個div高度隨窗口大小改變或者類似的東西，你可以使用EventListener來調用將修改基於第一個div高度的.div2的函數：

window.addEventListener('resize', function(event){ 
    $(".div2").css({"height":height}); 
}); 

您甚至可以將CSS transition應用於height屬性以爲高度更改設置動畫。

JSFiddle Demo

Answer 2

使用this插件並編寫一個函數，當一個div的屬性（在我們的例子中爲Height）發生變化時，您的函數會更新另一個的Height！

Answer 3

解決此問題有幾種不同的方法。在這裏看到：http://css-tricks.com/fluid-width-equal-height-columns/

Answer 4

謝謝大家！ 最簡單的解決方案是使用TABLE而不是DIV（無論這個問題出現在哪裏）...