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