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

Posted 2021-03-14 dinghaoran

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;
  }