0

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

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

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

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

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

4

3 回答 3

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>
于 2012-04-05T07:10:55.140 回答
0

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

于 2012-04-05T05:52:00.113 回答
0

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

于 2012-04-05T05:52:09.747 回答