如何分割兩個元素之間的剩餘高度？

Question

這是一個相當普遍的問題，我還沒有找到一個優雅的解決方案：

我在div中有幾個塊元素（比方說4）。一個非常簡單的垂直佈局。

前兩個元素具有固定的高度。其餘的兩個元素應該分割剩餘的空間（即，身高 - 第一元素高度 - 第二元素高度）。

我知道我只能計算尺寸，但是有沒有一種優雅的方式來實現這一點？

我想要一個使用原生瀏覽器功能（這是一個只在現代Firefox/Chrome版本上運行的內部應用程序，所以出血的邊緣是好的）或jQuery/jQuery UI（我們已經使用它）的解決方案。

Answer 1

使用CSS3 Flexbox的佈局：http://www.html5rocks.com/en/tutorials/flexbox/quick/

Answer 2

玩弄percantage數值xx（％），而不是XX（PX）爲高度和寬度。

Answer 3

你可以使用jQuery來計算高度。

假設我們有：

<div id="parent" style="height:300px; background-color: red;"> 
    <div id="first" style="height:100px; background-color: blue;"> 
    </div> 
    <div id="second" style="height:100px; background-color: #c6c6c6;"> 
    </div> 

    <div id="third" style="background-color: #75ac19;" ></div> 
    <div id="fourth" style="background-color: black;"></div> 
</div> 

<script type="text/javascript"> 
    var parrentHeight= $("#parent").height(); 
    var firstBlock = $("#first").height(); 
    var secondBlock = $("#second").height(); 
    var remainingHeight = parrentHeight - (firstBlock + secondBlock); 
    $("#third, #fourth").height(remainingHeight/2); 
</script>