蒙层Flexbox将页面底部固定在屏幕最下方,内容占满屏后紧跟其后

<div class="detail">
   <div class="detail-wrapper">
     我是内容
   </div>
   <div class="detail-close">
     我是底部
   </div>
 </div>

.detail{
  position:fixed;   //因为是遮罩效果所以要fixed
  top:0;            
  left:0;
  z-index: 100;
  width:100%;
  background:rgba(7,17,27,.8);
  display:flex;     //必须
  flex-direction:column; //必须，规定元素的排列方向
  height:100%;      //必须占满屏
  overflow: auto;   //没有这个就不能滚动了
  .detail-wrapper{
    width:100%;
    flex:1;         //占了百分百-flex:0的占位
  }
  .detail-close{
    flex:0;         //占位用
    margin:0 auto;
  }
}