html - 如何将页脚固定在底部？

Question

我试图将页脚保持在底部，我这样做是这样的:

#footer
{
    background-color: #3A3A3A;
    border-top: 1px solid #222222;
    font-size: 11px;
    overflow: auto;
}

#footer #footer-content
{
    padding: 10px 15px;
    display: inline-block;
    float: left;
}

这是 html:

<div id="footer">
   <div id="footer-content">
      ...

现在在某些页面中，页脚已正确固定，但在其他页面中，我的控件和页脚之间有很多空间，所以简而言之，垂直方向上有很多空间。如果我调整窗口大小，页脚会像其他页面一样正确地返回到底部，而不是保持固定在控件底部。我不明白为什么，我的 css 出了什么问题？

Answer 1

您尝试过位置:固定吗？

fiddle :https://jsfiddle.net/ar2smzyr/

CSS:

.footer {
  background: red;
  height: 100px;
  position: fixed;
  bottom: 0;
  width: 100%;
}

HTML:

<div class="footer">
  Content
</div>