如何拆分兩個元素之間的剩余高度？

Question

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

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

前兩個元素具有固定的高度。 剩余的兩個元素應該分割剩余的空間（即 body-height - first-element-height - second-element-height）。

我知道我可以計算尺寸，但是有沒有一種優雅的方法可以實現這一目標？

我想要一個使用本機瀏覽器功能的解決方案（它是一個僅在現代 Firefox/Chrome 版本上運行的內部應用程序，所以最前沿是可以的）或 jQuery/jQuery UI（我們已經在使用它）。

Answer 1

您可以使用 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>

Answer 2

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

Answer 3

使用百分比值 xx(%) 而不是高度和寬度的 xx(px)。