绝对底部几种方案

[CodeDreamfy]

• absolute
• calc
• table
• flexbox

首推flex方案，其次是calc与absolute，table不推荐

flex实现方式

html,body {
  height: 100%;
  min-height: 100%;
}
body {
  display: flex;
  flex-flow: column;
}
.content {
  flex: auto;
  overflow: hidden;
  overflow-y: auto;
}
.footer {
  flex: 0 0 100px;
}

absolute

要点就是footer高度与padding-bottom一致

html, body {
  height: 100%;
}
.wrapper {
  position: relative;
  min-height: 100%;
  padding-bottom: 100px;
}
.footer {
  position: absolute;
  bottom: 0;
	height: 100px;
  width: 100%;
}

calc

html, body {
  height: 100%;
  min-height: 100%;
}
.content {
  height: calc(100vh - 100px);
}
.footer {
  height: 100px;
}

table

不推荐的原因是表格会影响其他属性，margin,border等

html, body {
  height: 100%;
}
.wrapper {
  display: table;
  min-height: 100%;
}
.content {
  display: table-row;
  height: 100%;
}