sticky-footer实现记录

sticky-footer是css中的一个经典问题：
当页面内容超出屏幕，页脚模块会像正常页面一样，被推到内容下方，需要拖动滚动条才能看到。
而当页面内容小于屏幕高度，页脚模块会固定在屏幕底部，就像是底边距为零的固定定位。

html:

<div class="detailWrapper" v-show="detailShow">
  <div class="sticky-box clearfix">
      <div class="sticky-content">
    内容
      </div>
    </div>
    <div class="sticky-footer">
     <span class="icon-close" @click="showDetail"></span>
    </div>
  </div>

css:

.detailWrapper
    position fixed
    z-index: 1
    top 0
    left 0
    width 100%
    height 100%
    background rgba(7,7,27,0.8)
    overflow auto
    .sticky-box
      width 100%
      min-height 100%
      .sticky-content
        margin-top 64px
        padding-bottom 64px
    .sticky-footer
      margin -64px auto 0 auto
      width 32px
      height 32px
      line-height 32px
      font-size 32px
      color rgba(255,255,255,0.5)
      cursor pointer

相关介绍文章:
https://www.cnblogs.com/wisewrong/p/6525696.html
https://www.w3cplus.com/css3/css-secrets/sticky-footers.html