Question

这是一个相当普遍的问题，我还没有找到一个优雅的解决方案：

我在div中有几个块元素（比方说4）。一个非常简单的垂直布局。

前两个元素有固定的高度。剩余的两个元素应该分割剩余的空间（即身高 - 第一元素 - 高度 - 第二元素 - 高度）。

我知道我可以只计算尺寸，但是有一种优雅的方法来实现这个目标吗？

我想要一个使用本机浏览器功能的解决方案（它是仅在现代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

使用percantage值xx（％）而不是xx（px）作为高度和宽度。

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

3 个答案: