vue2.0：（八-2）、外卖App弹窗部分sticky footer

什么是sticky-footer ？

如果页面内容不够长的时候，页脚块粘贴在视窗底部，如果内容足够长时，页脚块会被内容向下推送。那具体要怎么做呢？下面以外卖App为例：

第一种方法：这个自己用过，是好使的，剩下的第二种方法是在网上找的，但是我没有用过。

　　1、基本布局：

　　代码：

<div v-show="detailShow" class="detail">
     <div class="detail-wrapper clearfix">　　<!-----------------------这里面是上面内容的外壳，需要clearfix来清除浮动>
          <div class="detail-main"></div>    <!-----------------------这里面是真正的上部分的内容>
     </div>
     <div class="detail-close">　　　　　　　　<!-----------------------这里面是关闭按钮的外壳>　　
          <i class="icon-close">*</i>        <!-----------------------这里面是关闭按钮的内容，比如说关闭字样，一般是一个叉号>
     </div> 
</div>

　　css代码:

.clearfix{
    display:inline-block;
    &:after{
        display:'block';
        content:' . ';
        height:0;
        line-height:0;
        clear:both;
        visibility:hidden;
    }
}
.detail{
   position:fixed;
   top:0;
   left:0;
   z-index: 100;
   width:100%;
   height:100%;
   overflow:auto;
   backdrop-filter:blur(10px);
   opacity:1;
   background:rgba(7,17,27,0.8);
}
.detail-wrapper{
   width:100%;
   min-height:100%;
}
.detail-main{
   margin-top:64px;
   padding-bottom: 64px;        <!-------------------这个padding，其实就是footer关闭按钮的高度。必须使用和footer相同的高度>
}
.detail-close{
   position:relative;
   width:32px;
   height:32px;
   margin:-64px auto 0 auto;   <!-------------------top:-64px;top需要是footer高度的负值 >
   clear:both;
   font-size:32px;
}

第二种方法：使用flex布局

这种方法就是利用flex布局对视窗高度进行分割。footer的flex设为0，这样footer获得其固有的高度;content的flex设为1，这样它会充满除去footer的其他部分。

body { 
    display: flex; 
    flex-flow: column; 
    min-height: 100vh;
 }
 .content {
    flex: 1; 
}
.footer{
    flex: 0;      
}

 

转载于:https://www.cnblogs.com/beyrl-blog/p/8744691.html