除非需要滚动条，否则 HTML 页脚会粘在浏览器底部
在某些网页上，内容很少，页脚在标题附近收缩。在这些情况下，我希望页脚粘在底部。我可以在 CSS 中轻松完成此操作：
#footer {
position: fixed;
width: 100%;
bottom: 0;
}
效果很好。但是，有时内容不是最少的，您甚至可能需要滚动才能看到底部的内容。在这些情况下，我希望页脚像平常一样直接出现在内容之后。
有没有办法只用 CSS 来做到这一点？我需要 Javascript hack 吗？如果我需要 hack，有一个好的库吗？我已经在使用 jQuery，很高兴使用依赖它的东西。我不关心IE8或以下版本。我只关心 IE9+ 和最新版本的 Chrome、Firefox、Safari 和 Opera。
On some webpages, the content is minimal and the footer scrunches up near my header. In these cases, I want the footer stuck to the bottom. I can do this easily in CSS with:
#footer {
position: fixed;
width: 100%;
bottom: 0;
}
Works great. However, sometimes the content is not minimal and you might even need to scroll to see the content at the bottom. In those cases, I want the footer to simply come right after the content, like normal.
Is there a way to do this in just CSS? Do I need a Javascript hack? If I need a hack, is there a good library? I'm using jQuery already, so happy to use something depending on it. I don't care about IE8 or below. I only care about IE9+ and recent versions of Chrome, Firefox, Safari and Opera.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我使用了这里描述的技术：
http://www.cssstickyfooter.com/
除了您知道高度的要求之外，似乎工作完美提前你的页脚...
I used the technique described here:
http://www.cssstickyfooter.com/
Seems to work perfect aside from the requirement that you know the height of your footer ahead of time...
由于您需要的功能是当内容不足以填充浏览器的高度时，在
content容器中保留空白，因此您可以对content使用 min-height div 使其强制页脚位于页面底部附近。IE。如果你的 html 是：
那么通过应用像这样的 css：
内容将始终占据至少该高度并且不会紧贴标题。
如果内容更受欢迎，您也可以尝试
margin-bottomSince the functionality you require is about having whitespace in the
contentcontainer when the content is less than enough to fill the browser's height, you could use a min-height for thecontentdiv to make it force the footer to about the bottom of the page.ie. If your html was:
then by applying a css like:
the content will always occupy at least that height and not stick up close to the header.
You could also try
margin-bottomfor the content if that is more likeable