将页脚推到短页面的底部

Posted 2023-03-21

技术标签:

【中文标题】将页脚推到短页面的底部【英文标题】：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 是的，这正是我想要的，您的解决方案完全解决了我的问题。十亿次感谢！ 【参考方案1】：

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

min-height: 100vh

margin: 0

box-sizing: border-box

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>

【讨论】：

以上是关于将页脚推到短页面的底部的主要内容，如果未能解决你的问题，请参考以下文章

javascript 一个js选项，用于将网页页脚推到页面底部，但不会将其作为粘性页脚。