css - 无法让 CSS Sticky 页脚工作。我究竟做错了什么？

Question

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

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

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

我知道我应该在 FF 中开发并在 IE 中修复错误，所以我猜我可能实际上犯了一个错误，并且它在 IE 中可以工作，但在其他地方没有。

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

谢谢，伙计们。

Answer 1

我用这样的代码取得了成功：

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

Answer 2

试试这个，它在 Firefox 上运行良好。

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

干杯。

Answer 3

我能看到的最小变化是：

• 将页脚部分移动到正文内
• 在 body 和 footerSection 上设置绝对位置
• 在 footerSection 上设置底部 = 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 及更高版本的内存），包括手机。