将页脚推到短页面的底部答案

【问题标题】：Push footer to the bottom of a short page将页脚推到短页面的底部
【发布时间】：2021-11-11 16:18:51
【问题描述】：

我想将页脚推到页面底部，由于页面内容不多，所以页脚会向上浮动并且不会移动到底部。

我尝试将页脚定位为固定元素作为解决方法，它可以工作，但在这种情况下不起作用：

在这个维度上，页脚的行为就像你看到的那样，这是完全可以预期的，因此在我的解决方法中显示了一个漏洞。

这是网站地址：https://n-ii-ma.github.io/Portfolio-Website/contact.html

这些是该部分的代码：

/* Contact Footer */

.contact-footer {
  position: fixed;
  bottom: 10px;
  left: 0;
  right: 0;
}

<body>
  <header>
    <h1 class="main-title">Nima's Portfolio</h1>
    <nav class="navigation">
      <ul>
        <li>
          <a href="./index.html">Home</a>
        </li>
        <li>
          <a href="./index.html#projects">Projects</a>
        </li>
        <li>
          <a href="./contact.html">Contact Me</a>
        </li>
      </ul>
    </nav>
  </header>
  <main>
    <section class="contact-section">
      <h2>Contact Me</h2>
      <p>Use the links below to contact me and I'll reach out to you as soon as possible</p>
      <div class="links">
        <a href="https://github.com/n-ii-ma" target="_blank">
          <i class="fab fa-github fa-3x"></i>
        </a>
        <a href="#">
          <i class="fas fa-envelope-square fa-3x"></i>
        </a>
      </div>
    </section>
  </main>
  <footer class="contact-footer">&copy; All Rights Reserved</footer>
</body>

有没有办法让我的页脚始终停留在页面底部？

【问题讨论】：

问题不清楚，因此页脚已经固定在底部，你能解释一下你想在这里实现什么吗？
@TariqSaeed 我更新了这个问题。希望现在清楚了。
我看过你留下的示例链接，但它确实在页面底部。您是否希望它停留在白色 div 的底部，而不是整个页面的底部？
Caio 我猜他不希望它在其他元素之上分层。他只想在页面内容较少时将其推到底部，以便在没有滚动时将页脚保持在视口的底部。
@tacoshy 是的，这正是我想要的，您的解决方案完全解决了我的问题。十亿次感谢！

标签： html css footer

【解决方案1】：

完全支持的简单解决方案是使用 Flexbox。

我们为 body 赋予 min-height: 100vh，因此它至少跨越整个视口高度。
默认body的margin会导致页面溢出。为了解决这个问题，我们需要使用以下命令重置边距：margin: 0
我们重新添加了一个填充。大多数浏览器的默认边距是 8px。所以我选择了那个。您可以随心所欲。
由于盒子模型，填充也会导致溢出。反击我们使用：box-sizing: border-box
然后我们使用 flexbox：display: flex。
为了保持我们使用的正常块级行为：flex-direction: column
要推动底部的页脚，我们使用：margin-top: auto;。如果页面内容小于视口高度，这会将页脚推到页面底部。

body {
  margin: 0;
  padding: 8px;
  box-sizing: border-box;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto;
}

<body>
  <header>
    <h1 class="main-title">Nima's Portfolio</h1>
    <nav class="navigation">
      <ul>
        <li>
          <a href="./index.html">Home</a>
        </li>
        <li>
          <a href="./index.html#projects">Projects</a>
        </li>
        <li>
          <a href="./contact.html">Contact Me</a>
        </li>
      </ul>
    </nav>
  </header>
  <main>
    <section class="contact-section">
      <h2>Contact Me</h2>
      <p>Use the links below to contact me and I'll reach out to you as soon as possible</p>
      <div class="links">
        <a href="https://github.com/n-ii-ma" target="_blank">
          <i class="fab fa-github fa-3x"></i>
        </a>
        <a href="#">
          <i class="fas fa-envelope-square fa-3x"></i>
        </a>
      </div>
    </section>
  </main>
  <footer class="contact-footer">&copy; All Rights Reserved</footer>
</body>

【讨论】：