位于页面底部的页脚有固定页眉

Question

位于页面底部的页脚有固定页眉我想将页脚放在页面底部，它还有一个固定的标题...不是position: fixed - 我不希望它留在屏幕上，它应该只是在页面的末尾，并在滚动时表现正常。不在可见屏幕的底部 - 在页面的底部，即; 毕竟其他内容。这是代码：我准备了一个演示：JSFiddle或者见下文<div id="header">Header</div><div id="content">     <p>Some content...</p>    </div><div id="footer">Footer</div>body{     /* Just to enable scrolling in JSFiddle */     height: 1000px;}#header{     width: 100%;     height: 100px;     position: fixed;     top: 0px;     z-index: 1;}#content{     width: 100%;     position: absolute;     top: 100px; /*Height of header*/     z-index: 0;}#footer{     width: 100%;     height: 100px;     position: absolute;     bottom: 0px;}/*For demo only*/#header, #footer{     border: 3px dashed #333333;     background: #FFFFFF;}#content{     background: #CCCCCC;     height: 200px;}

Answer 1

你几乎得到了它。你需要的是一个容器。

这是我的修改位： JSFiddle更新

添加容器div：

<div id="container">
    <div id="header"></div>
    <div id="page"></div>
    <div id="footer"></div></div>

然后使位置相对，高度100％：

#container {
    height: 100%;
    position: relative;}

并确保该位置对于页脚是绝对的。

Answer 2

或者对于那些通过谷歌搜索找到这篇文章的人，想要一个更短的答案，没有包装（因为你不需要它们）：

html { height: 100%; }body { min-height: 100%; position: relative; padding-bottom: 3em; }.footer { height: 3em; position: absolute; bottom: 0; }

完成后，页面现在至少有100％的屏幕高度，页脚位于页面底部，而不是“屏幕”的底部。如果页面比屏幕长，它仍然在底部，我们没有人为的“包装元素”或类似的东西：body元素已经是我们需要的包装=）

唯一需要注意的是，身体边距需要与页脚高度相同，但随后为负值，因为“bottom：0”规则将使页脚从底部开始而不是基线锚定。然后，再次，作为CSS，.less或.styl，这是平凡的保证。