sticky-footer使用_sticky footer怎么用-优快云博客

本文链接：https://blog.youkuaiyun.com/Silence_Sep/article/details/103305282

本文探讨了sticky-footer的多种实现方法，通过详细的代码示例，展示了如何在前端开发中创建固定底部布局，确保页面滚动时底部元素始终可见。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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