手风琴页面布局CSS问题

Question

我正在尝试构建一个看起来像这样的页面布局：

在这种情况下，A，B和C是三个div，它们容纳100％的页面高度。目标是构造CSS，使A和C是静态高度，B是填充空间的变量。

最好的方法是什么？

Answer 1

我想你可能正在寻找光荣的Sticky Footer。垂直缩放预览框以查看设计的作用。

当中间<div>没有将其向下推时，页脚位于页面底部，但当内容推送时页面会随页面浮动。

这种方法看起来有点不雅观，但很容易做到：

<div id="wrap">
    <div id="upper">Foo</div>
    <div id="middle">Foo</div>
</div>

<div id="lower">Foo</div>

诀窍在于胶带：http://www.cssstickyfooter.com/。

Answer 2

其他答案的问题在于，如果您的中心内容溢出，则布局会爆炸。试试这个：

http://jsfiddle.net/cwolves/JgS7f/

Answer 3

我会说绝对定位行。如果行B内容超出页面高度，则未指定要发生的操作。如果行B得到一个滚动条或者应该将C行推出视口，给主体一个滚动条吗？

我的回答是假设前者。

http://jsfiddle.net/aWjr9/4/

Answer 4

你可以在php中做到这一点    

<style>
.container .a{  border:1px red solid; height:100px; }

.container .b{  border:1px red solid;  }

.container .c{  border:1px red solid; height:150px;}

</style>

<div class="container">
<div class="a">
A
</div>
<div class="b" style="height:<?php echo $x;?>px;">
B
</div>
 <strong><div class="c">
C
</div></strong>