vue项目中h5移动端中通过flex布局实现首尾固定，中间滚动（借鉴）

html中

<div class="flexLayoutr">
    <div class="div_head"></div>
    <div class="div_content">中间区域</div>
    <div class="div_foot"></div>
</div>

css中

*{
      margin: 0;
      padding: 0;
  }
  .flexLayout{
      display: flex;
      display: -webkit-flex;
      min-height: 100vh;
      flex-direction: column;
  }
  .div_head{
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    width: 100%;
    position:absolute;
    z-index:5;
    top:0;
  }
  .div_bottom{
    width:100%;
    position:absolute;
    z-index:200;
    bottom:0;
  }
  .div_content{
    width:100%;
    overflow:auto;
    top:6.8rem;
    position:absolute;
    z-index:10;
    bottom:4.6rem;
  }

原文地址：https://www.cnblogs.com/dinghaoran/p/12221979.html