“Sticky Footer”，多种实现

所谓“Sticky Footer”是一种网页效果。即：页面的内容不足以撑开整个屏幕的高度时，footer置于屏幕底部；当内容超过一屏时，footer会随着内容下移，在内容底部。
如图：

Sticky Footer

html 布局如下：

 <div class="box">
  <div class="header"></div>
  <div class="content"></div>
  <div class="footer"></div>
</div>

css实现方案：

方案一： absolute

html,
body {
  /* 关键  */
  height: 100%;
}
.box {
  width: 100%;
  min-height: 100%; /* 关键 */
  position: relative; /* 相对定位 */
}
.header {
  height: 100px;
}
.content {
  padding-bottom: 100px;
}
.footer {
  height: 100px;
  position: absolute; /* 绝对定位 */
  bottom: 0;
  left: 0; /* IE 需要加  */   
}

方案二： flex

css代码

html,
body {
  /* 关键  */
  height: 100%;
}
.box {
  min-height: 100%; /* 关键 设置最小高度*/
  display: flex;
  flex-direction: column; /* 改变主轴方向 */
}
.header,
.footer  {
  height: 100px;
}
.content {
  flex: 1;
  /* 自适应 */
}

方案三：flex、flex-shrink、margin-top、vh（css单位）

.box {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.header {
  height: 100px;
  flex-shrink: 0;
}
.footer {
  height: 100px;
  /* 自动填满flex布局之后剩余的空间 */
  margin-top: auto;
  /* 子元素的缩小比例 默认为1: 空间不足时默认会缩小 */
  flex-shrink: 0;
}

方案四：flex、vh（css单位）

.box{
  /* 关键 */
  min-height: 100vh;  
  display: flex;
  flex-direction: column;
}
.header,
.footer {
  height: 100px;
}
.body{
  flex: 1;
}

方案五: min-height、calc

.header,
.footer {
  height: 100px;
}
.content {
  min-height: calc(100vh - 200px);
}

方案六：table

html,
body {
  height: 100%;
}
.box {
  display: table;
  width: 100%;
  min-height: 100%;
}
.header,
.footer {
  height: 100px;
}
.content {
  display: table-row;
  height: 100%;
}