html - 使用 100vh 时，页脚不会出现在页面底部

Question

描述：

我想使用以下 css 将我的网站构建成几个页面：

.page {
    height: 100vh;
}

我在网站上添加了几个页面，在最后一个页面上，我希望页脚出现在页面底部，例如

.page {
  height: 100vh;
  background-color: cyan;
}

footer {
  position: relative;
  width: 100%;
  height: 100px;
  bottom: 0;
  background-color: #000;
}

<div class="page">Page 1</div>
<div class="page">Page 2</div>
<div class="page">
  <footer></footer>
</div>

我试过的：

• 我试图设置 position: absolute (of footer) 就像在这个答案中一样：css - footer doesn't go at bottom
• 我还尝试在页脚周围放置一个包装器 height: 100%;
• 我还使用了 min-height: 100vh 而不是 height 没有效果

问题：

如何将页脚置于页面底部？

PS：我不知道它是否相关，但我使用的是 Firefox v. 85.0.2（64 位）

编辑：

我希望页脚在页面内，我使用这些页面来构建我的网站，并且页脚应该出现在最后一页的底部。

标签： htmlcssalignmentfooter

Answer 1

以下代码将解决您的问题：

.page {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: cyan;
}

.spacer {
    flex: 1;
}

footer {
  width: 100%;
  height: 100px;
  background-color: #000;
}

<div class="page">Page 1</div>
<div class="page">Page 2</div>
<div class="page">Page 3
<div class="spacer"></div>
<footer></footer>
</div>