将页脚保持在页面底部答案

【问题标题】：Keeping the Footer at the Bottom of the page将页脚保持在页面底部
【发布时间】：2022-11-23 17:23:54
【问题描述】：

我正在做一个项目，我试图让页脚留在页面底部，但在您滚动到页面底部之前看不见。我尝试在我的 CSS 中使用“位置：固定”，但它漂浮在我的内容上方，因为它绝对停留在页面中间并覆盖了内容。另外，对于没有太多内容的页面，当我没有指定位置或使用“position: absolute”时，页脚下方会有空白。请提供建议。

* {
  margin: 0;
  padding: 0;
 }

header {
  background-color: gray;
}

footer {
  background-color: gray;
  bottom: 0;
  height: 20px;
  position: fixed;
  width: 100%;
}

/* when I use the fixed position, the footer is fixed above my content. What I want is for the footer to remain at the bottom of the page but out of sight. */
<html>
 <body>
  <header>Heading</header>
  <main>
    <h1>Heading</h1>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci eos deserunt fugiat doloremque     your text`ut.</p>
  </main>
  <footer>&copy; Copyright, Business</footer>
</body>
</html>

【问题讨论】：

你好，我不太明白。您是否希望页脚始终在屏幕上可见？如果不是，则页面末尾的页脚，滚动时，在您看到页脚的位置。但是，如果在页面顶部的页脚不可见，对吗？
如果您希望它保留在页面底部，如果它是页面上的最后一项，那不是默认情况下它已经做的事情。也许你应该改写你的问题
是的，这是正确的@pierfarrugia
@Joshua 正如我在问题中所说，对于内容较少的页面，页脚不会留在底部。它下面有空间。

标签： html css footer

【解决方案1】：

我觉得你可以给它加一个父div，父div和它的宽高一样。 HTML:

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 200px;
  background-color: red;
}
.footer-container {
  height: 200px;
  width: 100vw;
}

<div class="footer-container">
  <div class="footer"></div>
</div>

【讨论】：

【解决方案2】：

如果我明白

* {
  margin: 0;
  padding: 0;
}

header {
  background-color: gray;
}

main {
  min-height: 100vh;
}

footer {
  background-color: gray;
  bottom: 0;
  height: 20px;
  width: 100%;
}

<header>Heading</header>
<main>
  <h1>Heading</h1>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci eos deserunt fugiat doloremque your text`ut.</p>
</main>
<footer>&copy; Copyright, Business</footer>

无需固定页脚。正常流程将页脚放在文档末尾。

当在页面顶部时，主要将页脚放在视图之外的最小高度

【讨论】：

【解决方案3】：

我在用

html,body{
  width: 100%;
  height: 100%;
}
body{
  display: flex;
  flex-direction: column;
}
body main{
  flex-grow: 1;
  overflow: auto;
}

从页脚部分删除了以下代码。

position: fixed

现在主要部分正在占用视口的可用空间。此外，如果主要部分内容太长，则在需要时会溢出。

【讨论】：

【解决方案4】：

您可以在 display:table 容器 (body) 中使用 display: table-footer-group。

通过将 min-height: 100vh 设置为正文，您的页脚将始终位于底部而不会隐藏最后的元素。

* {
  margin: 0;
  padding: 0;
}

body {
  display: table;
  min-height: 100vh;
  width: 100%;
}

header {
  background-color: gray;
}

footer {
  background-color: gray;
  height: 20px;
  width: 100%;
  display: table-footer-group;
}

#big-content {
  height: 2000px;
  align-items: end;
  display: none;
}

input:checked+#big-content {
  display: flex;
}

<header>Heading</header>
<main>
  <h1>Heading</h1>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci eos deserunt fugiat doloremque your text`ut.</p>
  <label for="more-content">More content</label>
  <input id="more-content" type="checkbox">
  <div id="big-content">end of big content</div>
</main>
<footer>&copy; Copyright, Business</footer>

【讨论】：