css 头部和底部固定中间内容滚动

1、flex布局

利用flex布局，上下两边固定，中间为剩下的100%

高度设置为100%；中间如果内容过多，则设置overflow:auto就会出现滚动条

<style type="text/css" scoped>
.wrap {

  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  font-size: 0.14rem;
}

/*设置顶部和底部的高度*/

.header,
.footer {
  height: 140px;
  line-height: 140px;
  background-color: #D8D8D8;
  text-align: center;

}

.main {

  flex: 1;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;

}

</style>
<template>
  <div class="wrap">
    <div class="header">头部</div>
    <div class="main">
      内容多才能滚动
    </div>
    <div class="footer">底部</div>
  </div>
  </div>
</template>

2、通过css的calc方法计算出中间内容的高度

中间内容的class

.main {
  height: calc(100% - 280px);
  overflow-x: hidden;
  overflow-y: auto;
}