我怎样才能有类似这样的布局？
我看到了一些不太适合我的解决方案。我见过的例子和 cmets 表明这是不可能的。 （图表在中间缺少溢出自动）。
为了它的价值：这是我目前的小提琴（我决定试一试桌子，hrmmmm）。
http://jsfiddle.net/valamas/m8R43/6/
附加： cmets 中提到的 Printscreen。添加页眉后向下拖动/选择页面时发生。见：http://dabblet.com/gist/3753308
【问题讨论】：
标签： css html fluid-layout
您可以使用普通的 div。
一个包装器，左、中、右三个内部 div。一个页脚在包装器 div 下。
<div id="wrapper">
<div id="leftSide">
left
</div>
<div id="middle">
middle
</div>
<div id="rightSide">
right
</div>
</div>
<div id="footer">
footer
</div>
然后你使用display: table;和 table-cell; 在包装器及其内部 div 上：
#wrapper
{
width: 100%;
height: 400px; /*whatever*/
display: table;
padding: 0;
margin: 0;
}
#left,
#middle,
#right
{
display: table-cell;
}
设置左右元素的宽度，中间会神奇的填满空间。
#left
{
width: 100px;
}
#middle
{
background: #00f;
}
#right
{
width: 200px;
}
display: table; 和 table-cell; 样式模仿表格的行为，但允许标记成为语义元素。
除了 IE
【讨论】：
如果您不太关心源顺序： http://dabblet.com/gist/3748868
它使用了一些技巧来让页脚在较低视口高度的屏幕上显示：
body {
border-bottom: 100px solid; /* height of footer */
box-sizing: border-box;
}
'border-box' 属性在这里解释：http://www.paulirish.com/2012/box-sizing-border-box-ftw/
基本上，它所做的是，它使元素在其中包含边框和填充。因此，此处给予主体的底部边框将保留在视口内，而不是 sans-border-box。
这使它有点像页脚可以容纳的负空间。我使用了“边框”，因为您可能想修改填充。
至于页脚，它是固定定位的，所以它是相对于视口的，而不是绝对定位所获得的布局。因此它位于主体底部边框的顶部（共享其高度值）。
中心块是流动的，因为我给了它“溢出：隐藏”属性，它可以清除浮动（http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/）。它也可以在没有溢出的情况下工作，但可能会导致问题。
由于您希望在列内的内容大于内容高度时能够滚动，因此我在中心列内添加了一个容器，并将其设置为溢出：auto。
【讨论】：