Html 带此代码的粘性页脚？

我试过一堆粘脚，但没有一个能正常工作。一步一步地解释如何做到这一点会很好

我试图实现的是在页面底部粘贴一个页脚（一行大小-20px）。换句话说，如果内容不多，它将位于页面底部，而不是页面的一半（我已经实现了这一点）。然而，如果有很多内容，它将不会尴尬地坐在内容的顶部，它将在页面底部的内容下面

以下是我完成的相关代码：

CSS:

HTML:

服务条款©2014（空白） 竞争政策

---

如果您预览此代码，您将看到它确实按照预期工作，它会粘在底部。只是如果你有太多的内容，那么代码就不会被按下，当你打开网站时，代码会停留在页面的底部。

使用position:fixed on footer并在body中添加一个padding bottom:20px，这样一来，页脚将始终位于底部，如果body内容太大，填充将使其保持在页脚上方

#footer {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 20px;
  text-align: center; //don't user align=center on the tag, it's deprecated
}
body { //or some other element
  padding-bottom: 20px;
}

---

如果你用google

sticky footer html css

，你可能会得到10种不同的方法来实现它……这不是我想要的，甚至更好。为帮助干杯！

<div id="footer" align="center" > Terms of Service &nbsp;&nbsp;&nbsp| &nbsp;&nbsp;&nbsp© 2014 (Blank) &nbsp;&nbsp;&nbsp| &nbsp;&nbsp;&nbspPrivacy Policy
</div>

#footer {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 20px;
  text-align: center; //don't user align=center on the tag, it's deprecated
}
body { //or some other element
  padding-bottom: 20px;
}