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

【问题标题】：How to split up remaining height between two elements?如何分割两个元素之间的剩余高度？
【发布时间】：2012-04-18 21:04:14
【问题描述】：

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

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

前两个元素具有固定的高度。剩下的两个元素应该分割剩余的空间（即body-height - first-element-height - second-element-height）。

我知道我可以只计算尺寸，但有没有一种优雅的方法来实现这一点？

我想要一个使用本机浏览器功能（它是一个仅在现代 Firefox/Chrome 版本上运行的内部应用程序，所以前沿是可以的）或 jQuery/jQuery UI（我们已经使用它）的解决方案。

【问题讨论】：

标签： javascript jquery html jquery-ui layout

【解决方案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>

【讨论】：

这就是我一直这样做的方式，我正在寻找现代替代品。
不幸的是，没有这种非常具体的样式的方法，您可以编写一个 javascript 函数来完成任务，通过传递参数给它。

【解决方案2】：

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

【讨论】：

我已经浏览了规范，但看不到如何解决我的 flexbox 问题。想一起破解一个例子吗？
@futlib：我提供的链接与您所要求的内容完全相同（尽管有 box-orient:horizontal 并且只有 1 个而不是 2 个固定高度元素）。
谢谢，就这样！我忽略了那篇文章，因为它说它已经过时并且符合规范（经过更多调查，这也允许这样做）。但是在那篇文章中的示例中添加供应商前缀可以使其工作。

【解决方案3】：

使用百分比值 xx(%) 而不是 xx(px) 作为高度和宽度。

【讨论】：