粘性页脚隐藏内容

Question

我使用 CSS 制作了以下粘性页脚。底部页面内容目前隐藏在页脚后面（参见随附的屏幕截图）。我如何调整我的 CSS 以便所有正文内容都可见并且页脚仍然停留在浏览器窗口的底部？谢谢！

CSS：

 .fo {
    position: absolute;
    left: 0;
    bottom: 0;
    height:65px;
    width: 100%;
    color: #eaeaea;
    margin-left: -8px;
}

原文由 soft genic 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我过去在互联网上遇到过这个答案。效果很好：

HTML

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

CSS

     html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}
/* IE 6 and down:
#container {
   height:100%;
}

原文由 kthornbloom 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以创建一个清晰的 div 并为其指定高度。

 .clear { clear: both; height: 60px; }

<div class="clear"></div>
<div id="footer">FOOTER CONTENT</div>

高度是您将内容保持在页脚上方所需的任何高度，例如。比页脚高。如果页脚是 50px；高，我做 60px；对于清晰的 div 中的高度。因此，当我滚动时，页脚保持在原位，但当我到达底部时，从页脚后面流出的内容有空间被推到页脚上方而不会被覆盖。超级简单，而且效果很好。

原文由 Greg 发布，翻译遵循 CC BY-SA 4.0 许可协议