如何在页面底部设置页脚

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;的父元素(即：body(
• 使用设置为Flex Grow并设置为1的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">
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>