三行流体滚动中心 CSS 布局答案

【问题标题】：Three row fluid scrolling center CSS layout三行流体滚动中心 CSS 布局
【发布时间】：2012-02-13 08:59:32
【问题描述】：

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

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

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

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

这是我目前所拥有的：

http://jsfiddle.net/7gmpu/

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

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

【问题讨论】：

标签： html css

【解决方案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}

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;
}

【讨论】：

哇，我不认为仅仅通过设置顶部和底部，div 会拉伸。这是完美的！
不客气。有关详细信息，请参阅w3.org/TR/css3-positioning/#abs-non-replaced-height。
@zeta 这是一个令人难以置信的例子，谢谢。如果一个人想要在整个事物周围留出 10 像素的边距怎么办？我正在努力实现这一目标，但它似乎打破了一切。有什么想法吗？
@Tom：哇，等等。这个答案是 10 个月大的。可能使用#wrapper{position:absolute; top:10px; right:10px; left:10px; bottom:10px;} 并且不要在#wrapper 中使用width，因为它是自动计算的。（它在您的代码中中断，因为计算出的宽度超过 100%）。
@Zeta 是的，抱歉，我刚遇到这个，这正是我需要的。 jsfiddle.net/7gmpu/26 这似乎不起作用。

【解决方案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，footer5em和#container区域缩小到3 em；

【讨论】：