页脚问题：无法保持低调

Question

我已经尝试了2个小时让我的页脚停留在底部。
我一直在尝试“Matthew James Taylors”技术，但没有运气。

任何人都会看到我遗失或做错了什么？

这是一个实例：http://glustik.com/essex/index.html

任何帮助都会很棒！

我会将CSS代码与{}相关联，但它总是会让我失望。

Answer 1

我觉得修复这个问题的CSS仍然会有问题，我很想重写整个事情：HTML标记和CSS，否则我怀疑会有更多的麻烦。

以下是一些最有可能给您带来麻烦的事情：

• 重复id个值（如上所述）
• 不必要的absolute定位
• 几个div上的硬编码高度值
• 不必要地使用“clearfix”divs
• 过度使用负边距以补偿其他元素的填充（总是有问题）
• 次要但相关：使用像floatRight这样的类，就像使用内联样式一样糟糕。

我认为一般而言，不要试图控制一切的定位和高度 - 只要让正常的内容流来决定它。当然，标记中的最后一个元素（页脚）应该在底部而没有所有这些过度思考的限制。

祝你好运！

编辑：显然我已经失去了帮助，所以我觉得我应该直接回复：为了快速修复，只需将页脚放在底部：

• 从#mainBody
删除高度和底部填充

（在FF4和IE8中测试）。页脚内部仍然会出现一些填充问题，但这可以通过多种方式解决，具体取决于您希望如何处理它。再次祝你好运。

Answer 2

您的页脚位于#container，位于相对位置。因此，它位于#container的底部。

尝试将其移出#container，或从#container中删除相对定位

Answer 3

因为主容器（#mainBody）中的所有内容都是浮动的，所以容器确定其高度的唯一方法是通过“height”属性设置为100px;。页脚正确呈现在主容器的100像素高度下方。

您有三种选择：

1. 您可以使用this
这样的clearfix正确清除主容器，使其高度根据其内容动态显示
2. 或者您可以将主容器的高度设置为更大的值。我将其更改为700px，页脚在主体下方呈现井。
3. 或者你可以完全删除height，这可能是长期的最佳解决方案。感谢@Gaby aka G. Petrioli指出这一点。

Answer 4

我已经这么做了很长时间，从未听说过这种方法。这不会让它变坏，但我圈子中目前接受的版本来自Ryan Fait（http://ryanfait.com/resources/footer-stick-to-bottom-of-page/）

如果您在Chrome中加载它并禁用位置：相对于容器，它会将页脚正确粘贴到页面底部。这对我来说是一个问题，因为它与教程所说的相反。无论如何，它实现了你的目标。

Answer 5

你应该至少看看指南针。它使CSS变得更加容易。针对您的具体问题，请查看：

http://compass-style.org/reference/compass/layout/sticky_footer/

Answer 6

进行以下更改，并在Chrome中为我呈现正常：

• 从bottom:0;
中移除#footer
• 将padding-bottom:167px;中的#mainBody更改为所需位置（我使用了455px，看起来非常不错）