Question

我正在尝试将页脚固定在页面底部，但我不能这样做。我已经尝试过许多在StackOverflow和其他网站上找到的解决方案，但是没有一个起作用。

我现在所拥有的只是一个页脚。

这是页脚html（页脚标签在body标签内部）

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

<footer>

  <div class="master-footer-wrap">
    <a href="/"><img id="footer-logo" src="/assets/images/logo-white.png" /></a>
    <ul class="master-footer-list">
      <li><span>© 2019 – iStudi. Todos os direitos reservados.</span></li>
      <li><a href="/termos-de-uso">Termos de Uso</a></li>
      <li><a href="/politica-de-privacidade">Política de Privacidade</a></li>
    </ul>
  </div>

</footer>

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文档以了解每个类的作用。

Answer 2

您有一个master-footer-wrap，并且footer本身设置为固定位置。但是，您需要将position: relative设置为正文，并将absolute设置为页脚。如果在footer或master-footer-wrap仍设置为position: fixed的情况下执行此操作，则它将保持不变。查看下面的代码片段以获取工作示例：）

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

<footer>

    <a href="/"><img id="footer-logo" src="/assets/images/logo-white.png"><a/>
      <ul class="master-footer-list">
        <li><span>© 2019 – iStudi. Todos os direitos reservados.</span></li>
        <li><a href="/termos-de-uso">Termos de Uso</a></li>
        <li><a href="/politica-de-privacidade">Política de Privacidade</a></li>
      </ul>

</footer>

Answer 3

您的CSS可以大大简化。您不需要所有这些横幅和包装。只需设置position: absolute; bottom: 0px;并删除页面底部的填充，您的页脚就会粘住。

必须使用某种方法来消除那些经过硬编码的#footer-logo东西，当宽度变窄时，使文本与徽标重叠，但是我无法弄清楚。

html, body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

footer {
  font-family: "Comic Sans MS", sans-serif;
  font-size: 14px;
  text-align: center;
  color: #C8C7CC;
  background-color: black;

  position: absolute;
  bottom: 0px;
  min-height: 50px;  /* improved support for narrow screens */
  width: 100%;
}

#footer-logo {
  position: absolute;
  left: 20px;
  top: 12.5px;
  width: 61px;
  height: 25px;
}

footer a {
  color: #FF6869;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

footer ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

footer ul li {
  display: inline-block;
  padding-top: 17px;
  padding-left: 15px;
}

<footer>
    <a href="#"><img id="footer-logo" src="//stackexchange.com/users/flair/6784526.png" /></a>
    <ul>
      <li> 2019 — wizzwizz4</li>
      <li><a href="#">Lovely link</a></li>
      <li><a href="//stackoverflow.com">Visited link</a></li>
    </ul>
</footer>

如何在页面末尾修复页脚？

3 个答案: