前端必懂之Sticky-Footer粘性页脚

---

写在最前：Sticky Footer 是 css 的一种布局场景。页脚 footer 永远固定在页面的底部，页面内容不够长的时候页脚黏在视窗底部，内容足够长时会被向下移动。老式门户网站由于内容过短常常版权页脚前移，移动端特定布局也需要 Sticky Footer 来解决这些问题。

一、利用绝对定位和 padding 完美兼容

已知底部高度，利用绝对定位和 padding 完美兼容
https://codepen.io/qietuniu/pen/KYxMwv

1. 去除标签多余的 margin,padding, 给 html 和 body 设置 100%
2. 外部容器 min-height 为 100%，使得内容少时也能撑开
3. 主体内容设置 padding-bottom，这个为底部的高度，可以使内容完全显示否则会使主体内容有底部面积大小区域被遮挡
4. footer 高度固定，进行绝对定位

DOM 节点

<div class="container">
  <div class="header"></div>
  <div class="section">
  </div>
  <div class="footer">Copyright© 1994-2019 切图妞 </div>
</div>

样式代码

html,
body {height: 100%;}
.container {
  position: relative;
  min-height: 100%;
  height: auto !important;
  height: 100%; /*IE6 不识别 min-height*/
}
.section {padding-bottom: 60px;}
.footer {
  position: absolute;
  width: 100%;
  height: 60px;
  bottom: 0px;
}

二、利用 padding-bottom 和 margin-top 完美兼容

已知底部高度，利用 padding-bottom 和 margin-top 完美兼容
https://codepen.io/qietuniu/pen/dLqpdR

1. 去除标签多余的 margin,padding, 给 html 和 body 设置 100%；
2. 外部容器 min-height 为 100%，使得内容少时也能撑开
3. 主体内容设置 padding-bottom，这个为底部的高度
4. footer 高度固定，margin-top 的值为高度负值

DOM 节点

<div class="container">
  <div class="header"></div>
  <div class="section">
  </div>
  <div class="footer">Copyright© 1994-2019 切图妞 </div>
</div>

样式代码

html,
body {height: 100%;}
.container {
  min-height: 100%;
  height: auto !important;
  height: 100%; /*IE6 不识别 min-height*/
}
.section {padding-bottom: 60px;}
.footer {
  position: relative;
  margin-top: -60px;
  width: 100%;
  height: 60px;
}

三、新增块级元素填补页脚遮挡

已知底部高度，新增块级元素填补页脚遮挡，实现完美兼容
https://codepen.io/qietuniu/pen/dLqpez

1. 去除标签多余的 margin,padding, 给 html 和 body 设置 100%；
2. 外部容器 min-height 为 100%，使得内容少时也能撑开
3. 主体内容设置 margin-bottom，值为底部的高度的负值
4. footer 位置在与 container 同级，section 同级新增块元素. 底部和新增块元素高度一致

DOM 节点

<div class="container">
  <div class="header"></div>
  <div class="section">
  </div>
</div>
<div class="footer">Copyright© 1994-2019 切图妞 </div>

样式代码

html,
body {height: 100%;}
.container {
  min-height: 100%;
  height: auto !important;
  height: 100%; /*IE6 不识别 min-height*/
  margin-bottom: -60px;
}
.placeholder,
.footer {height: 60px;}

四、用表格属性实现完美兼容

底部不定高度，利用表格属性实现完美兼容
https://codepen.io/qietuniu/pen/QPVKVR

1. 去除标签多余的 margin,padding, 给 html 和 body 设置 100%
2. 外部容器 min-height 为 100%; 使得内容少时也能撑开，display 属性设置为 table
3. 主体内容 display 属性设置为 table-row，高度设置为 100%

DOM 节点

<div class="container">
  <div class="header"></div>
  <div class="section">
  </div>
  <div class="footer">Copyright© 1994-2019 切图妞 </div>
</div>

样式代码

html,
body {height: 100%;}
.container {
  display: table;
  width: 100%;
  min-height: 100%;
}
.section {
  display: table-row;
  height: 100%;
}

五、calc 计算

vh 存在兼容有限，一般在移动端使用。100vh 可代替 body 和 html 的 100% 来拿到视口高度实现效果
https://codepen.io/qietuniu/pen/NmLRmV

1. 外部容器使用 calc 计算，100vh 减去底部高度
2. footer 位置与 container 同级，高度固定
3. 主体内容 display 属性设置为 table-row，高度设置为 100%

DOM 节点

<div class="container">
  <div class="header"></div>
  <div class="section">
  </div>
</div>
 <div class="footer">Copyright© 1994-2019 切图妞 </div>

样式代码

.container {min-height: calc(100vh - 60px);
}
.footer {height: 60px;}

六、flex 弹性布局

底部不定高度，利用 flex 弹性布局实现效果，兼容性有限建议移动端使用
https://codepen.io/qietuniu/pen/EJeNYW

1. 外部容器 display 设为 flex 弹性布局，flex-flow 设置方向为 column 纵向并设置最小高度为 100vh
2. 主体内容 flex 属性设为 1

DOM 节点

<div class="container">
  <div class="header"></div>
  <div class="section">
  </div>
  <div class="footer">Copyright© 1994-2019 切图妞 </div>
</div>

样式代码

.container {
  display: flex;
  flex-flow: column;
  min-height: 100vh;
}
.section {flex: 1}

七、Grid 网格布局

底部不定高度，利用 Grid 网格实现效果，兼容性有限建议移动端使用
https://codepen.io/qietuniu/pen/EJeNYW

1. 外部容器 display 设为 grid 网格布局，grid-template-rows 设置一个网格的行，fr 单位可以帮助我们创建一个弹列的网格轨道, 它代表了网格容器中可用的空间（就像 Flexbox 中无单位的值）
2. header 头部的位置放在主体内容内部
3. footer 中 grid-row-start 和 grid-row-end 属性设置单元格开始和结束的行线

DOM 节点

<div class="container">
  <div class="header"></div>
  <div class="section">
  </div>
  <div class="footer">Copyright© 1994-2019 切图妞 </div>
</div>

样式代码

.container {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
}
.footer {
  grid-row-start: 2;
  grid-row-end: 3;
}

结语

以上方法各有优劣，根据使用场景选择合适的方案

场景	方案
兼容性要求高	①②③
底部不固定高度	④⑥⑤⑦
PC 端建议	①②
移动端建议	①②⑥

完整代码

尊重原创，如需转载请注明出处！