CSS中的扩展中间层

Question

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

理想情况下,它需要完全用CSS和HTML实现(没有javascript小提琴!).我已经对这个问题做了很多但是我不能强制橙色部分填满剩余空间(如果它没有满足)并且如果它溢出则开始滚动.

Answer 1

我想这就是你想要的:

现场演示(编辑)

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
}