页脚问题：不能降低它

问题描述

| 我已经尝试了2个小时，以使我的页脚停留在底部。 我一直在尝试“ Matthew James Taylors”技术，但没有运气。 有人看到我在想什么或做错了吗？ 这是一个实时示例：http://glustik.com/essex/index.html 任何帮助将是巨大的！ 我会在CSS代码上附加{}，但对我来说总是很麻烦。     

解决方法

我觉得要解决此问题的CSS仍然会成问题，我很想重写整个内容：HTML标记和CSS，否则我怀疑将来会遇到更多麻烦。 以下是最有可能给您带来麻烦的一些事情： 重复的“ 0”值（如上所述） 不必要的ѭ1定位 几个div上的硬编码高度值 不必要使用\“ clearfix \” div 过度使用负边距来补偿其他元素上的填充（总是有问题的） 次要但相关的：使用诸如

floatRight

之类的类，与使用内联样式一样糟糕。 我认为，总的来说，不要试图控制所有内容的位置和高度，而要让正常的内容流来控制它。当然，标记中的最后一个元素（页脚）应位于底部，而没有所有这些过度考虑的限制。 祝你好运！ 编辑：显然我已经变得无济于事，所以我觉得我应该添加一个直接的响应：对于快速修复，只需将页脚放在底部： 除去ѭ3的高度和底部填充物 （在FF4和IE8中测试）。页脚中仍然存在一些填充问题，但是可以通过多种方式来解决，具体取决于您的处理方式。再次祝您项目顺利。     ,您将页脚绝对定位在

#container

中，该位置相对。因此，它位于

#container

的底部。 尝试将其从ѭ4中移出，或从#container中移除相对位置     ,因为主容器（

#mainBody

）中的所有内容都是浮动的，所以容器的唯一确定高度的方法是通过“ height”属性（将其设置为

100px;

）。页脚正确地渲染在主容器的100像素高度以下。 您有三种选择： 您可以像这样使用clearfix正确清除主容器，使其高度基于其内容是动态的 或者您可以将主容器的高度设置为更大的值。我将其更改为700px，并将页脚渲染到主体下方。 或者您也可以完全删除ѭ9，这从长远来看可能是最好的解决方案。感谢@Gaby aka G. Petrioli指出了这一点。     ,我已经做了很长时间了，从未听说过这种方法。这并没有太糟，但是我圈子中当前接受的版本来自Ryan Fait（http://ryanfait.com/resources/footer-stick-to-bottom-of-page/） 如果您将其加载到Chrome中并从容器中禁用position：relative，则会将页脚正确粘贴到页面底部。这对我来说是一个问题，因为它与本教程所说的相反。无论如何，它都能实现您的目标。     ,您至少应该看看Compass。它使CSS非常容易。对于您的特定问题，请看以下内容： http://compass-style.org/reference/compass/layout/sticky_footer/     ,进行以下更改，它在Chrome中对我来说效果很好： 从

#footer

移除

bottom:0;

将

#mainBody

中的

padding-bottom:167px;

更改到所需位置（我用

455px

看起来不错）