残りの高さを2つの要素の間で分割する方法は？

Question

これは、私がまだエレガントな解決策を見つけていないため、かなり一般的な問題です。

divにいくつかの要素があります（4としましょう）。非常に単純な垂直レイアウト。

最初の2つの要素は高さが固定されています。残りの2つの要素は、残りのスペース（つまり、ボディー - 第1エレメント - 第2エレメント - 高さ）を分割する必要があります。

私はちょうどサイズを計算することができますが、これを達成するためのエレガントな方法はありますか？

私は現代的なブラウザ機能（現代のFirefox/Chromeバージョン上でのみ動作する内部アプリケーションなので出血は問題ありません）またはjQuery/jQuery UI（すでに使用しています）のいずれかを使用するソリューションが必要です。

Answer 1

使用CSS3のフレキシボックスレイアウト：http://www.html5rocks.com/en/tutorials/flexbox/quick/

Answer 2

がpercantage値XX（％）の周りを再生し、高さと幅のために（PX）xxをしません。

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>