【css样式】手机端头部尾部固定中间滑动样式的实现

<style>
.headertop {
  position: absolute;
  top: 0px;
  height: auto; /*高度可以不写，可以通过内部元素撑开，但是需要考虑是否会与自适应部分发生重合*/
  width: 100%; /*宽度是必要，如果没有宽度就无法撑出div*/
}


.middle_outer {
  position: absolute !important;
  position: relative;
  top: 50% !important; /*header部分的高度*/
  top: 0;
  bottom: 10%; /*footer部分的高度*/
  width: 100%;
  overflow: hidden; /*外层div不滚动，而是内层div滚动，实现自适应*/
  height: auto !important;
  height: 100%;
}


.middle_inner {
  height: 100%;
  overflow-y: auto; /*当内容超出后，就会出现滚动条*/
}


.footertop {
  position: absolute;
  bottom: 0px;
  height: auto; /*高度可以不写，可以通过内部元素撑开，但是需要考虑是否会与自适应部分发生重合*/
  width: 100%;
}
</style>