html - CSS 中的扩展中间层

Question

我将如何设计一个具有固定高度的页眉和页脚(附加到浏览器窗口的顶部和底部)但中间扩展的网站。滚动条将仅用于中间部分(图表中的橙色部分)，因此页面的其余部分永远不需要滚动。我在下面画了一个模型来解释得更清楚。

理想情况下，它需要完全用 CSS 和 HTML 实现(没有 javascript fiddles!)。我已经解决了这个问题，但我不能强制橙色部分在未满时(无论内容是什么)填满剩余空间，如果溢出则开始滚动。

Answer 1

我认为这就是您想要的:

Live Demo ( edit )

HTML:

<div id="header">Patrick</div>
<div id="content">..</div>
<div id="footer">Beardmore</div>

CSS:

html, body {
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden
}
#header, #content, #footer {
    position: absolute;
    left: 0;
    width: 100%
}
#header {
    top: 0;
    height: 100px;

    background: #ccc
}
#content {
    top: 100px;
    bottom: 100px;
    overflow-y: auto
}
#footer {
    bottom: 0;
    height: 100px;

    background: #ccc
}