如何分割两个元素之间的剩余高度？

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>