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

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

你几乎得到了它。你需要的是一个容器。这是我的修改位：&nbsp;JSFiddle更新添加容器div：<div&nbsp;id="container"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id="header"></div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id="page"></div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id="footer"></div></div>然后使位置相对，高度100％：#container&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;100%; &nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;relative;}并确保该位置对于页脚是绝对的。

Answer 2

或者对于那些通过谷歌搜索找到这篇文章的人，想要一个更短的答案，没有包装（因为你不需要它们）：html&nbsp;{&nbsp;height:&nbsp;100%;&nbsp;}body&nbsp;{&nbsp;min-height:&nbsp;100%;&nbsp;position:&nbsp;relative;&nbsp;padding-bottom:&nbsp;3em;&nbsp;}.footer&nbsp;{&nbsp;height:&nbsp;3em;&nbsp;position:&nbsp;absolute;&nbsp;bottom:&nbsp;0;&nbsp;}完成后，页面现在至少有100％的屏幕高度，页脚位于页面底部，而不是“屏幕”的底部。如果页面比屏幕长，它仍然在底部，我们没有人为的“包装元素”或类似的东西：body元素已经是我们需要的包装=）唯一需要注意的是，身体边距需要与页脚高度相同，但随后为负值，因为“bottom：0”规则将使页脚从底部开始而不是基线锚定。然后，再次，作为CSS，.less或.styl，这是平凡的保证。