无法获得CSS Sticky页脚工作。我究竟做错了什么？

Question

嗯，这是我在这里的第一篇文章，真的很喜欢这个网站。

我有一个非常基本的（丑陋的罪恶）网站，我已经开始，出于某种原因，我无法让CSS Sticky页脚为FireFox工作。 IE可以工作，但FF显示它在页面的中间位置。

网址是http://dev.aipoker.co.uk

我知道我应该在FF中进行开发并在IE中进行错误修复，所以我猜我可能实际上犯了一个错误，并且它在某种程度上适用于IE，但在其他任何地方都没有。

任何人都可以帮助我摆脱痛苦吗？

谢谢，伙计们和女孩们。

Answer 1

试试这个one，它适用于Firefox。

顺便说一下，如果你还没有，你应该听听Boagworld的播客。这个棒极了！ :)

干杯。

Answer 2

我已成功使用这样的代码：

footer { 
  display: block; 
  position: absolute; 
  width: 100%; 
  bottom: 0px; 
}

Answer 3

我能看到的最小变化是：

• 将footerSection移动到体内
• 在body和footerSection上设置绝对位置
• 在footerSection上设置bottom = 0px

在你的头脑中最终会出现这样的事情：

<style type="text/css">
  #body, #footerSection { position: absolute; }
  #footerSection { bottom: 0px; }
</style>

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

Answer 4

这就是你需要知道的关于css唯一的粘性页脚和粘性导航：

坚持到页面底部

Position: absolute;
top:auto;
bottom: 0;

坚持屏幕的底部

Position: fixed;
top:auto;
bottom:0;

任何问题，这可能是由于你放置你的html代码的位置（不要使页脚成为子元素，除非它坚持内容包装），或重叠CSS。

您可以通过翻转自动和顶部将相同的技术应用于粘性导航。它是跨浏览器兼容的（来自IE7及以上的内存），包括手机。