页脚问题：无法保持下去
我已经尝试了两个小时才让我的页脚停留在底部。
我一直在尝试“马修詹姆斯泰勒”技术，但没有运气。
有人看到我缺少什么或做错了什么吗？
这是一个实例： http://glustik.com/essex/index.html
任何帮助那就太好了！
我会用 { } 附加 CSS 代码，但它总是对我造成影响。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
我觉得解决这个问题的 CSS 仍然会有问题，我很想重写整个事情：HTML 标记和 CSS，否则我怀疑将来会有更多麻烦。
以下是一些最有可能给您带来麻烦的事情：
id值（如上所述）absolute定位floatRight这样的类，就像使用内联样式一样糟糕。我认为一般来说，不要试图控制所有东西的位置和高度，而是让正常的内容流决定它。当然，标记中的最后一个元素（页脚）应该位于底部，而没有所有这些过度考虑的限制。
祝你好运！
编辑：显然我表现得毫无帮助，所以我觉得我应该添加直接响应：为了快速修复，只需将页脚放在底部：
（在 FF4 和 IE8 中测试）。页脚中仍然存在一些填充问题，但可以通过多种方式解决，具体取决于您想要如何处理它。再次祝您的项目顺利。
I feel like the CSS to fix this will still be problematic, I would be tempted to rewrite the whole thing: HTML markup and CSS, otherwise I suspect there will be more trouble down the road.
Here are some things that are most likely giving you trouble:
idvalues (as mentioned)absolutepositioningfloatRight, just as bad as using inline styles.I think in general, instead of trying to control the positioning and height of everything - just let the normal content flow dictate it. Naturally, the last element in your markup (footer) should be on the bottom without all these over-thought restrictions.
Best of luck!
EDIT: Apparently I've come off as unhelpful, so I felt I should add a direct response: For a quick fix, to simply get the footer on the bottom:
#mainBody(tested in FF4 and IE8). There will still be some padding issues within the footer, but that can be resolved in a number of ways depending on how you'd like to approach it. Once again, good luck with your project.
您将页脚绝对定位在
#container中，它是相对定位的。因此，它位于#container 的底部。尝试将其移出
#container，或从#container 中删除相对定位You have the footer positioned absolutely in
#container, which is positioned relatively. therefore, its being positioned at the bottom of#container.try moving it out of
#container, or remove the relative positioning from #container由于主容器 (
#mainBody) 内的所有内容都是浮动的，因此容器确定其高度的唯一方法是通过“height”属性，该属性设置为100px;.页脚正确呈现在主容器 100 像素高度的正下方。您有三个选择：
高度，从长远来看，这可能是最好的解决方案。感谢@Gaby aka G. Petrioli 指出了这一点。Because all of the content inside your main container (
#mainBody) is floated, the container's only way to determine it's height is via the "height" property, which is set to100px;. The footer is correctly rendering right below the 100 pixel height of the main container.You have three options:
heightaltogether, which will probably be the best solution in the long-run. Thanks to @Gaby aka G. Petrioli for pointing this out.我已经这样做很长时间了，从未听说过这种方法。这并不意味着它很糟糕，但我的圈子中当前接受的版本来自 Ryan Fait (http://ryanfait.com/resources/footer-stick-to-bottom-of-page/)
如果您在 Chrome 中加载此内容并禁用容器中的position:relative，它会执行此操作将页脚正确粘贴到页面底部。这对我来说是一个问题，因为它与教程所说的相反。无论如何，它实现了你的目标。
I've been doing this a long time and have never heard of this method. That doesn't make it bad, but the currently accepted version in my circles comes from Ryan Fait (http://ryanfait.com/resources/footer-stick-to-bottom-of-page/)
If you load this up in Chrome and disable the position:relative from the container it does properly glue the footer to the bottom of the page. That signals a problem to me, because it's contrary to what the tutorial says. Regardless, it accomplishes your goal.
您至少应该看一下指南针。它使 CSS 变得更加容易。对于您的特定问题，请查看：
http://compass-style.org/参考/指南针/布局/sticky_footer/
You should take at least a look at Compass. It makes CSS so much easier. For your particular question, take a look at:
http://compass-style.org/reference/compass/layout/sticky_footer/
进行以下更改，它在 Chrome 中对我来说渲染得很好：
#footer中删除bottom:0;padding-bottom:167px;#mainBody到所需的位置（我使用455px，它看起来相当不错）Make the following changes and it rendered fine in Chrome for me:
bottom:0;from#footerpadding-bottom:167px;in#mainBodyto the desired location (I used455pxand it looked pretty good)