三排流体滚动中心CSS布局

Question

我目前正在为我正在开发的应用程序构建HTML和CSS.

此应用程序有一个固定的高度标题,一个固定的高度页脚和一个应该占据其余空间的中间区域.

问题是我希望页眉和页脚在整个时间内保持固定,而内容如果变得太大则会滚动.

我已经能够将页眉和页脚固定到位的情况下滚动内容,但这会使用push div使得滚动条在标题后面消失,另一个选项使它在页脚后面消失..我有一个很难让div在超过最大尺寸时滚动而不给它100%的高度.

这是我到目前为止:

http://jsfiddle.net/7gmpu/

纯CSS可以实现吗？或者我每次调整大小时都必须使用javascript计算窗口高度？

我的"解决方案"是否接近？

Answer 1

如果要修复元素,则必须使用CSS定位.您当前的解决方案已经接近,但它有点复杂.

假设你想拥有三个街区:

HEADER
CONTENT
FOOTER

最自然的方式是将它们全部放在容器中(如果您的网站只包含这3个元素,则不需要)并将它们置于绝对位置.对于HEADER顶部为0,对于FOOTER底部为0.在CONTENT中,您必须调整顶部和底部以确保它将是页脚/标题的高度.

因此,如果你使用#wrapper,#header,#content和#footer,这就是你需要的代码:

#wrapper{position:absolute; top:0;bottom:0;width:100%;}
#header, #footer, #content{position:absolute; width:100%;}
#header{top:0; background-color:#faa;height:50px;}
#content{top:50px;bottom:150px; overflow:auto;}
#footer{bottom:0px; background-color:#afa; height:150px}

演示

编辑:您更新的演示.如果要使用固定定位,请不要指定高度值.通过定义top和使用隐式高度bottom.也overflow:auto用于滚动条.我做了以下更改:

#mid {
    background:    #222;
    /* dropped height */
    bottom:50px; /* implicit height */
    overflow:auto; /* automatical scrollbars */
    width:        100%;    
    position:    fixed;
    top:        100px;
}