除非需要滚动条，否则会粘在浏览器底部的 HTML 页脚

Posted 2023-03-21

【中文标题】除非需要滚动条，否则会粘在浏览器底部的 HTML 页脚

【英文标题】：HTML Footer that sticks to the bottom of browser unless scrollbars needed

【发布时间】：2012-03-11 06:54:23

【问题描述】：

在某些网页上，内容很少，页脚在我的页眉附近蜷缩起来。在这些情况下，我希望页脚粘在底部。我可以在 CSS 中轻松做到这一点：

#footer 
    position: fixed;
    width: 100%;
    bottom: 0;

效果很好。但是，有时内容不是最少的，您甚至可能需要滚动才能看到底部的内容。在这些情况下，我希望页脚像往常一样直接出现在内容之后。

有没有办法在 CSS 中做到这一点？我需要 javascript hack 吗？如果我需要 hack，有没有好的图书馆？我已经在使用 jQuery，很高兴根据它使用一些东西。我不关心 IE8 或更低版本。我只关心 IE9+ 和最新版本的 Chrome、Firefox、Safari 和 Opera。

【参考方案1】：

我使用了这里描述的技术： http://www.cssstickyfooter.com/

除了提前知道页脚高度的要求之外，似乎工作完美......

【参考方案2】：

由于您需要的功能是在内容不足以填充浏览器高度时在 content 容器中使用空格，因此您可以为 content div 使用最小高度以使其强制页脚到页面底部。

即。如果您的 html 是：

<div class='header'> header </div>
<div class='content'> some content here </div>
<div class='footer'> footer </div>

然后通过应用类似的css：

.content  min-height:300px; 

内容将始终至少占据该高度，并且不会靠近标题。

如果内容更受欢迎，您也可以尝试margin-bottom 的内容

【讨论】：

问题是我不知道要制作多高的内容...除非我使用javascript。我当然可以，但要寻找 CSS 解决方案或 javascript/jquery 库。