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

Question

我想让我的页脚贴在网站的底部，我还没有找到让页脚贴在底部的好答案，当页面高度小于视口高度时视口高度小于页面高度。

Answer 1

如果你想要一个粘性页脚，你可以使用 position: fixed;。例如;

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
}

Answer 2

您可以使用 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>

p.s。这主要是因为设置 min-height 和 flex-child 上的设置 flex-grow: 1 在 flex-container.

中间

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

因此，一旦您的内容达到达到内容元素 min-height 的大小，就没有 space 可以填充了，它的行为将像具有 height: auto 的元素一样正常

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

Clean way to make footer stick to the bottom of the page?

html

css

footer