如何修复页尾的页脚？

Question

我正在尝试修复页面底部的页脚，但我做不到。我已经尝试过在 StackOverflow 和其他网站上找到的很多解决方案，但没有一个有效。

\n\n

我现在拥有的是粘性页脚。

\n\n

这是页脚 html（页脚标签位于 body 标签内）

\n\n

\r\n

\r\n

/*BODY*/\r\n\r\nhtml,\r\nbody {\r\n  position: relative;\r\n  height: 100%;\r\n  margin: 0px 0px 50px 0px;\r\n  padding: 0;\r\n}\r\n\r\n\r\n/*FOOTER*/\r\n\r\n#footer-logo {\r\n  position: absolute;\r\n  left: 20px;\r\n  top: 12.5px;\r\n  width: 61px;\r\n  height: 25px;\r\n}\r\n\r\n.master-footer-list {\r\n  list-style-type: none;\r\n  overflow: hidden;\r\n  padding: 0;\r\n  margin: 0;\r\n}\r\n\r\n.master-footer-list li {\r\n  display: inline-block;\r\n  vertical-align: middle;\r\n  padding-top: 17px;\r\n  padding-left: 15px;\r\n}\r\n\r\n.master-footer-list a:hover {\r\n  text-decoration: underline;\r\n}\r\n\r\n.master-footer-wrap {\r\n  position: fixed;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: 0;\r\n}\r\n\r\nfooter {\r\n  font-family: var(--work-sans);\r\n  font-weight: 300;\r\n  font-size: 14px;\r\n  text-align: center;\r\n  position: fixed;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: 0;\r\n}\r\n\r\nfooter div {\r\n  margin-bottom: 0px;\r\n  height: 50px;\r\n  width: 100%;\r\n  background-color: black;\r\n}\r\n\r\nfooter a {\r\n  color: #FF6869;\r\n  text-decoration: none;\r\n}\r\n\r\nfooter span {\r\n  color: #C8C7CC;\r\n}

\r\n

<footer>\r\n\r\n  <div class="master-footer-wrap">\r\n    <a href="/"><img id="footer-logo" src="/assets/images/logo-white.png" /></a>\r\n    <ul class="master-footer-list">\r\n      <li><span>\xc2\xa9 2019 \xe2\x80\x93 iStudi. Todos os direitos reservados.</span></li>\r\n      <li><a href="/termos-de-uso">Termos de Uso</a></li>\r\n      <li><a href="/politica-de-privacidade">Pol\xc3\xadtica de Privacidade</a></li>\r\n    </ul>\r\n  </div>\r\n\r\n</footer>

\r\n

\r\n

\r\n

\n

Answer 1

最简单的解决方案是使用 Flexbox。这是使用 Tailwind 库的工作小提琴：

<div class="flex flex-col min-h-screen">
  <header class="h-8 bg-red">

  </header>
  <main class="flex-1">
     The main content
  </main>
  <footer class="h-8 bg-green">

  </footer>
</div>

https://jsfiddle.net/nartub/b4fwg3um/

类是不言自明的，但您可以参考 Tailwind 文档来了解每个类的作用。