如何将页脚粘贴到底部？

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

你试过position: fixed吗？

小提琴：https://jsfiddle.net/ar2smzyr/

CSS：

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

HTML：

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