css – 如何使用固定的左/右,流体中间和固定页脚的3列布局？

我怎么能有这样的布局？

我见过一些不太适合我的解决方案.我见过的例子和评论表明这是不可能的. (图中间缺少溢出自动).

值得一提的是：这是我当前的小提琴(我决定试用一张桌子,hrmmmm).

http://jsfiddle.net/valamas/m8R43/6/

额外：
评论中提到的Printscreen.在添加标题后向下拖动页面时发生.见：http://dabblet.com/gist/3753308

解决方法

如果您不太关心源订单：
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.这使得它有点像可以由页脚容纳的负空间.我使用’border’是因为你可能想修补填充物.
至于页脚,它是固定的,所以它相对于视口,而不是你用绝对定位得到的布局.因此它位于身体的底部边界的顶部(其共享其高度值).

中心区块是流动的,因为我给它’overflow：hidden’属性,它清除浮动(http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/).它也可以在没有溢出的情况下工作,但它可能会导致问题.由于您希望能够在列内的内容大于内容高度时滚动,因此我在中心列中添加了一个容器,并将其溢出：auto.