使页脚始终位于页面底部的视图之外

Question

我想创建一个始终位于页面底部但又不在视图中的页脚，这意味着如果用户不滚动，即使页面内容不足以将其向下推，它也不应该可见够了。

这是一个快速说明：

我尝试在网上搜索，但没有找到这个具体案例的答案。

Answer 1

通过将除页脚之外的所有内容包装在容器中，可以很容易地做到这一点。然后只需将

min-height: 100vh

应用于该包装容器，除非您向下滚动，否则页脚将默认保留在视图之外。

body {
  margin: 0;
}

.wrapper {
  min-height: 100vh;
}

<div class="wrapper">
  <header>Header / Navbar</header>
  <main>Main Content</main>
</div>
<footer>Footer</footer>

Answer 2

我认为你应该将

position:absolute

应用到页脚。

设置页脚样式如下。

body {
  position: relative;
  ....
}

.footer {
  position: absolute;
  bottom: 0;
  ....
}

希望这对您有帮助。

Answer 3

使身体100%高度。

 body {
    height: 100%;
}