如何在页面底部设置页脚？

Question

我有一个显示在所有页面上的页脚，我希望该页脚位于网页内容的底部，以防内容不会溢出视口的高度，我想要这个页脚留在视口的底部。我该如何实现？

如果我能让它与 phone 类似的视口兼容或不乱七八糟的话也很好

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

#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

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

使用 parent 元素（即：body）设置为 display: flex;
使用 main 元素设置为 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>

如何在页面底部设置页脚？

How to set footer at bottom of a page?

html

css

media-queries

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