sticky-footer的几种实现方式
<template>
<div class="header-detail" v-if="showDetail">
<div class="detail-wrapper clearfix">
<div class="detail-main">
</div>
</div>
<div class="detail-close" @click='handleClickHide'>
<i class="icon-close"></i>
</div>
</div>
</template>
<script>
export default {
name: 'HeaderDetail',
props: {
showDetail: {
type: Boolean,
default: false
}
},
methods: {
handleClickHide () {
this.$emit('hide-detail')
}
}
}
</script>
<style lang="stylus" scoped>
@import "~styles/stylus/mixin"
@import "~styles/stylus/variable"
.header-detail
position: fixed
z-index: 100
top: 0
left: 0
width: 100%
height: 100%
overflow: auto
backdrop-filter: blur(10px)
opacity: 1
color: $color-white
background: $color-background-s
.detail-wrapper
min-height: 100%
.detail-main
margin-top: 1.28rem
padding-bottom: 1.28rem
.detail-close
position: relative
width: .64rem
height: .64rem
margin: -1.28rem auto 0 auto
clear: both
font-size: .64rem
</style>
.clearfix
display: inline-block
&:after
display: block
content: '.'
height: 0
line-height: 0
clear: both
visibility: hidden