使用css弹性布局，让页面footer底部固定

 在前端开发过的工作中，footer永远固定在底部的需求。也就是说一个Footer元素如何粘住底部，使其无论内容多或者少，Footer元素始终紧靠在浏览器的底部。我们知道，当内容足够多可以撑开底部到达浏览器的底部，如果内容不够多，不足以撑开元素到达浏览器的底部时，下面要讲的是使用css弹性布局解决如何使元素粘住浏览器底部。需求看下图：

首先这是HTML部分结构：

  <div class="layout">
      <header class="header">头部</header>
      <main class="mian">内容</mian>
      <footer class="footer">底部</footer>
    </div>

然后看css部分：

.layout {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.header {
  height: 2rem;
}
.mian {
  width: 100%;
  flex: auto;
  background-color: yellow;
}
.footer {
  height: 2rem;
  background-color: red;
}

最终的结果：

 

这里面主要使用的是display:flex弹性布局，让父元素的最小高度为100vh，vh的是视口的单位，1vh等于视口高度的1%，100vh就等同于视口的高度。flex-direction: column;可以蒋子元素垂直显示，正如一个列一样。

然后在子元素内容部分main添加flex:auto;

flex: auto 等同于 flex: 1 1 auto，它根据元素的 width 或 height 属性调整元素的大小，但是其非常灵活，以便让它们吸收沿主轴的任何额外空间。

以上就是footer粘在页面底部的方法。