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

 

posted @ 2018-04-08 14:13  Beyrl.pan  阅读(580)  评论(0编辑  收藏  举报