如何将页脚粘到底部？

Question

我试图将页脚保持在底部，我这样做了：

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

这是html：

{{1}}

现在在某些页面中页脚被正确固定，但在其他页面中我的控件和页脚之间有很大的空间，所以用很少的词来说，垂直方向有很多空间。 Happean，页脚而不是保持固定在页脚控件的底部，如果我调整窗口大小，页脚将在底部正确返回到另一页。我不明白为什么，我的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>