Question

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

此应用程序有一个固定的高度标题，一个固定的高度页脚和一个占据剩余空间的中间区域。

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

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

这是我到目前为止所做的：

http://jsfiddle.net/7gmpu/

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

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

Answer 1

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

假设你想拥有三个街区：

HEADER
CONTENT
FOOTER

最自然的方式是将它们全部放在容器中（如果您的网站只包含这3个元素，则不需要）并将它们置于绝对位置。对于HEADER top为0，对于FOOTER bottom为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;
}

Answer 2

使用非常少的标记可以达到预期的效果。鉴于HTMl看起来像

 <header>
     Header
 </header>
 <div id="container">
     <article class="post">
         A1;
     </article>
     <article class="post">
         A2;
     </article>
     <article class="post">
         A3;
     </article>
     <article class="post">
         A4;
     </article>
     <article class="post">
         A5;
     </article>
 </div>
 <footer>
     footer
 </footer>?

您可以使用以下css设置样式：

 * {
     box-sizing: border-box;
 }

 html, body {
     height: 100%;
 }

 body {
     padding-bottom: 5em;
     padding-top: 7em;
     position: relative;
 }

 body > div#container {
     position:absolute;
     top: 7em;
     bottom: 5em;
     width: 100%;
     overflow-y: scroll;
     min-height: 3em;

 }

 body > header {
     height:7em;
     position:relative;
     margin-top: -7em;
 }

 body > footer{
     height:5em;
     position: absolute;
     bottom: 0;
 }

你应该准备好了。您可以在此处查看实时示例：http://jsfiddle.net/ramsesoriginal/Mg4Ad/

在上面的代码中，header为7em，footer 5em和#container区域缩小为3 em;

三排流体滚动中心CSS布局

2 个答案: