html - 使页脚粘在页面底部的干净方法？

Question

<分区>

Answer 1

您可以使用 flexbox 实现粘性页脚。 而如果内容小于屏幕高度，您的 main 使用 flex-grow:1 增长。

鉴于这些是代码片段的重要部分:

html,body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex-grow: 1;
}

---

header, footer {
  height: 50px;
}

header {
  background-color: green;
}

.content {
  background-color: grey;
  overflow: hidden;
}

footer {
  background-color: red;
}

html,body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex-grow: 1;
}

<header>header</header>
<main>
  <div class="content">
    content
  </div>
</main>
<footer>footer</footer>

附注 这主要是因为在 flex-container 中间的 flex-child 上设置了 min-height 和设置 flex-grow: 1。

假设您在 flex-container 中有 3 个具有设定高度的元素。 具有 flex-grow: 1 的元素将填充剩余空间以达到父元素的高度。而其他 2 个元素的高度取决于它们的内容。

因此，一旦您的内容达到内容元素 min-height 的大小，就没有空间可以填充了，它的行为通常与 height: auto 的元素一样