如何在页面底部设置页脚？ [复制]

Question

我有一个如下所示的页脚，它显示在所有页面上，我希望该页脚保持在网页内容的底部，并且如果内容没有超出视口的高度，我希望该页脚保持不变在视口的底部。我如何做到这一点？

如果我可以使它与类似手机的视口兼容或不搞混，那就太好了

我也不希望固定位置，因为这只会导致页脚在我滚动时停留在屏幕底部。

#footer {
width: 100vw;
min-height: 15vh;

background-color: var(--blue-black);
color: white;
display: table;
}

<div id="footer">
  <div id="footer-content-table">
    <div class="footer-box contact-us">
      <div class="footer-box-title">
        Contact Us
      </div>
      <div id="footer-contacts-list">
        <a class="footer-contact" href="www.secretish.com">
          <img src="/logo" alt="Our logo">
        </a>
      </div>
    </div>
    <div class="footer-box other-links">
      <div class="footer-box-title">
        Other Links
      </div>
      <div id="footer-links-list">
        <a href="/about" class="footer-link">About Us</a>
        <a href="/report" class="footer-link">Report a Problem</a>
      </div>
    </div>
  </div>
  <div id="footer-credit">Powered by bleep of bleep</div>
</div>

Answer 1

最好将页脚放在页面底部（除非被内容推送）

• 使用设置为display: flex;的父元素（即：正文）
• 使用 ma​​in 元素设置为 Flex Grow 设置为 1

/* QuickReset */ * {margin: 0; box-sizing: border-box;}

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.layout-main {
  flex-grow: 1;
}

.layout-footer {
  background: gold;
}

<main class="layout-main">
  Some short Main content
</main>
<footer class="layout-footer">
  I will stay ideally in the bottom when not enough content in Main
</footer>

这是一个在 Main 元素中包含高大文本的示例：

/* QuickReset */ * {margin: 0; box-sizing: border-box;}

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.layout-main {
  flex-grow: 1;
}

.layout-footer {
  background: gold;
}

<main class="layout-main">
  <p style="height: 200vh">Some looong Main content.... (Scroll down)</p>
</main>
<footer class="layout-footer">
  I will stay ideally in the bottom when not enough content in Main
</footer>