html - 使以下 div 扩展到底部然后滚动

Question

我有以下设计

如何让橙色的div从头到底展开，内容再大再滚动，同时让footer保持在页面底部？

我尝试将 div 定位为 position:absolute 并带有 bottom:footers's height 和 overflow-y:scroll，但如果我这样做它与头部重叠。

Answer 1

您可以将header 和footer 元素分别设置为position: fixed 到顶部和底部。从那里您只需将 padding-top 和 padding-bottom 添加到中央内容 div，这样其中的内容就不会重叠。试试这个:

<header></header>
<div id="content"></div>
<footer></footer>

header {
    height: 150px;
    position: fixed;
    top: 0;
    width: 100%;
}

#content {
    padding: 150px 0 100px;
}

footer {
    height: 100px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

Example fiddle