使用 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
我还尝试在高度为 100% 的页脚周围放置一个包装纸；
我还使用了 min-height: 100vh 而不是没有效果的高度

问题：

如何将页脚放到页面底部？

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

编辑：

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

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>

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

footer doesn't appear on bottom of page when using 100vh

html

css

alignment

footer