用CSS实现粘性页脚

粘性页脚
粘性页脚模式是指当页面内容不足以填满视口高度时，页脚会“粘附”在视口底部的一种模式。在本教程中，我们将介绍创建粘性页脚的几种技术。

要求
粘性页脚模式需要满足以下要求：
当内容不足以填满视口时，页脚粘附在视口底部。
如果页面内容超过视口底部，页脚会正常地位于内容下方。

//css
html, body {
  box-sizing: border-box;
  height: 100%;
  padding: 0;
  margin: 0;
}
.wrapper {
  box-sizing: border-box;//c3盒模型
  min-height: 100%;
  display: flex;
  flex-direction: column;//盒子列布局
}
.page-header, .page-footer {
  flex-grow: 0;//当内容填充主区域时，这可以防止它们缩小。
  flex-shrink: 0;//当内容填充主区域时，这可以防止它们缩小。
}
.page-body {
  flex-grow: 1;//我们将主要内容设置为 flex-grow: 1
}

//html
<div class="wrapper">
  <header class="page-header">This is the header</header>
  <main class="page-body">
    <p>Main page content here, add more if you want to see the footer push down.</p>
  </main>
  <footer class="page-footer">Sticky footer</footer>
</div>

效果图

摘自mdn web docs 文档