我将如何设计一个具有固定高度页眉和页脚(连接到浏览器窗口的顶部和底部)但扩展中间的网站.滚动条仅适用于中间(图中的橙色部分),因此页面的其余部分永远不需要滚动.我在下面画了一个模型来更清楚地解释.
理想情况下,它需要完全用CSS和HTML实现(没有javascript小提琴！).我已经对这个问题做了很多但是我不能强制橙色部分填满剩余的空间(如果它没有满足)并且如果它溢出则开始滚动.
解决方法
我想这就是你想要的：
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
}
