带有非静态网页帮助的粘性页脚[重复]答案

【问题标题】：Sticky footer with a non-static web page help [duplicate]带有非静态网页帮助的粘性页脚[重复]
【发布时间】：2011-10-01 14:26:58
【问题描述】：

可能重复：
CSS sticky footer

我的页面有内容，当用户提交内容时，页面长度会增加。这对于粘性页脚的传统设计来说是一个问题，因为它们往往会停留在原始位置并最终只是浮动在页面中间。

有没有人有任何提示或技巧来制作即使内容放大页面大小也能将其保持在底部的粘性页脚？

提前致谢。

感谢 AlienWebguy...查看我网页的结构后，我们发现在标准页脚 CSS 中添加 clear: both 来修复它。

【问题讨论】：

标签： html css

【解决方案1】：

编辑：这不是真正的“粘滞页脚”，但这就是在这种情况下解决 OP 问题的原因。对于真正的粘性页脚应用程序try this：

是的，你会想要使用这个 CSS：

#sticky_footer {
    position:relative;
    clear:both;
    bottom:0;
    height:100px;
    width:100%;
}

这样使用：

<body>

...
<div id="sticky_footer"></div>
</body>

【讨论】：

这仅对我部分有效。我页面底部的内容仍然在页脚下方，尽管它确实停留在底部。
这在 IE6 中不起作用，但我认为这是最好的解决方案，因为微软正在积极杀死 IE6，它不需要任何 Javascript 或 hack。
只有中国和韩国仍在使用该浏览器。仍然支持它的 Web 开发人员正在这样做——支持它的存在。 @Tory 如果您对页脚上方/下方的内容有疑问，只需调整 z-index。添加喜欢 z-index:9999;到#sticky_footer css 以保持它在一切之上。
@AlienWebguy 但这并不能解决任何问题。这只是让我的页脚位于内容之上，这也不是我想要的。我需要两个分开的。
为了避免页脚重叠内容，您可以设置一个 padding-bottom: 100px; （等于页脚或更多）在正文上

【解决方案2】：

我在这个粘性页脚实现方面取得了巨大成功：http://ryanfait.com/sticky-footer/

【讨论】：