如何实现自适应Footer：内容少时固定视口底，多时随内容下移

你的代码中使用position: absolute定位footer，它会相对于设置了position: relative的body进行定位。当main内容较少时，body高度等于视口高度，footer能正常固定在视口底部；但当main内容超过视口高度时，body会被内容撑开至超过100%高度，此时footer仍固定在视口底部，就会与main的内容重叠，出现你所说的“上移”问题。

方案一：Flexbox布局（推荐，现代浏览器支持） #

Flexbox是实现这种粘性footer最简单高效的方式，无需计算高度：

html, body {
  height: 100%;
  margin: 0;
  box-sizing: border-box;
}
*,*:after,*:before{
  box-sizing: inherit;
}
body {
  display: flex;
  flex-direction: column;
  font-family: 'Roboto', sans-serif !important;
  background: #f2f2f2;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  min-width:250px;
  overflow-x:auto;
}
main {
  flex: 1; /* 让main占据header和footer之外的全部可用空间 */
}
footer {
  background: #333;
  color: #fff;
  text-align: center;
  padding: 0 2rem;
}

原理：将body设置为垂直方向的flex容器，main通过flex:1自动填充剩余空间。当main内容不足时，flex布局会将main撑满视口剩余高度，footer自然固定在底部；当内容超过视口时，main会被撑开，footer跟随在内容末尾。

方案二：兼容旧浏览器的传统方法 #

如果需要兼容不支持Flexbox的旧浏览器，可以采用固定footer高度+内边距/外边距的方式：

html{
  height:100%;
  box-sizing: border-box;
}
*,*:after,*:before{
  box-sizing: inherit;
}
body{
  margin: 0;
  min-height: 100%;
  font-family: 'Roboto', sans-serif !important;
  background: #f2f2f2;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  min-width:250px;
  overflow-x:auto;
  padding-bottom: 60px; /* 值等于footer的高度，防止内容被footer覆盖 */
  position: relative;
}
main{
  min-height: calc(100vh - 60px); /* 视口高度减去footer高度，确保main至少撑到视口底部上方 */
  margin: 0;
}
footer{
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  height: 60px; /* 设置固定高度 */
  background: #333;
  color: #fff;
  text-align: center;
  padding: 0 2rem;
  display: flex;
  align-items: center; /* 垂直居中文字 */
  justify-content: center;
}

原理：通过给body添加padding-bottom预留footer的空间，避免main内容被遮挡；main使用calc(100vh - footer高度)确保内容不足时，main至少撑到视口底部上方，footer固定在底部；当内容超过视口时，body被内容撑开，footer随之移动到内容末尾。

内容的提问来源于stack exchange，提问作者mits