在网页设计中,Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过。它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部;如果内容足够长时,页脚块会被内容向下推。
我们来看一下效果图:
可以看到不管怎样,关闭按钮,页面内容不够的时候, 关闭按钮 在页面底部。页面内容够长时, 关闭按钮 在内容的最下面,滚到最下面才能看到。
它不是 fixed 在屏幕的底部的,从第二张图片就可以看出来。
那么,是怎样做的呢?
<div v-show="detailshow" class="detail">
<div class="detail-wrapper clearfix">
<div class="detail-main">
<p>{{ seller.bulletin }}</p>
<p>{{ seller.bulletin }}</p>
<p>{{ seller.bulletin }}</p>
<p>{{ seller.bulletin }}</p>
<p>{{ seller.bulletin }}</p>
<p>{{ seller.bulletin }}</p>
<p>{{ seller.bulletin }}</p>
<p>{{ seller.bulletin }}</p>
</div>
</div>
<div class="detail-close">
<i class="icon-close"></i>
</div>
</div>
样式如下:
.detail
position: fixed
z-index: 100
top: 0
left: 0
width: 100%
height: 100%
overflow: auto
background: rgba(7, 17, 27, 0.8)
.detail-wrapper
min-height: 100%
.detail-main
margin-top: 64px
padding-bottom: 64px
.detail-close
position: relative
width: 32px
height: 32px
margin: -64px auto 0 auto
clear: both
font-size: 32px
.clearfix
display: inline-block
&:after
display: block
content: "."
height: 0
line-height: 0
clear: both
visibility: hidden