效果图:
如果内容的高度没有屏幕大小这么高,关闭按钮在底部这个位置。如果内容高度超过屏幕大小,会有会有滚动条并且关闭按钮始终位于页面最顶部。
实现方法
<div class="detail" v-show="isShow">
<div class="detail-wrapper clearfix">
<div class="detail-main">
<slot>none</slot>
</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
margin:-64px auto 0 auto
width:32px
height:32px
clear:both
font-size:32px
内容区域为一个盒子,关闭按钮为一个盒子,要给内容区域设置它的最小高度为屏幕的100%,那么此时关闭按钮会始终位于内容区域下方,内容区域的padding-bottom设置为64px是为了给关闭按钮留地方。然后margin:-64px auto 0 auto,关闭按钮就向上移,始终位于屏幕底部的上64px。