html - 三行流体滚动中心 CSS 布局

Question

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

这个应用程序有一个固定高度的页眉、一个固定高度的页脚和一个应该占据剩余空间的中间区域。

问题是我希望页眉和页脚始终固定在原位，而如果内容变得太大则滚动。

我已经能够在固定页眉和页脚的情况下使内容可滚动，但这使用了一个 push div 使得滚动条在页眉后面消失，另一个选项让它在页脚后面消失。我当 div 超过最大尺寸而不给它 100% 高度时，我很难让它滚动。

这是我目前所拥有的:

http://jsfiddle.net/7gmpu/

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

我的“解决方案”是否接近？

Answer 1

如果你想让你的元素固定，你必须使用 CSS 定位。您当前的解决方案已经很接近了，但是有点复杂。

假设你想要三个 block :

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}

Demo

编辑:Your updated demo .如果您想使用固定定位，请不要指定高度值。通过定义 top 和 bottom 来使用隐式高度。还可以将 overflow:auto 用于滚动条。我做了以下更改:

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