无法让 CSS Sticky 页脚工作。我究竟做错了啥？

Posted 2023-03-21

【中文标题】无法让 CSS Sticky 页脚工作。我究竟做错了啥？

【英文标题】：Can not get CSS Sticky footer to work. What am I doing wrong?无法让 CSS Sticky 页脚工作。我究竟做错了什么？

【发布时间】：2010-09-14 15:23:12

【问题描述】：

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

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

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

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

谁能帮我摆脱困境？

谢谢大家。

【问题讨论】：

Fx 3.0.x 在 WinXP 上看起来与这台机器上的 IE7 几乎相同。你能提供一张图片或更多关于你想要完成的事情的详细信息吗（链接到功能示例也很好。）

【参考方案1】：

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

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

干杯。

【讨论】：

看起来他们已经把文章移到这里了：boagworld.com/dev/fixed-footers-without-javascript

【参考方案2】：

我已经成功编写了这样的代码：

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

【讨论】：

它（总是）粘在底部，但会覆盖实际的容器内容。

【参考方案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>

【参考方案4】：

这是您需要了解的所有内容关于仅 CSS 的粘性页脚和粘性导航：

贴在页面底部

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

粘在屏幕底部

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

任何问题，这可能是由于您放置 html 代码的位置（不要将页脚作为子元素，除非它粘在内容包装器上）或重叠的 CSS。

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