css sticky footer: 完美的CSS绝对底部

当做一个页面时，如果页面内容很少，不足于满屏时，不会留下大片空白，底部层“detail-close” 在屏幕底部定位；

             如果页面内容超于屏幕高度，底部层“detail-close” 不会被重叠，被内容顶下去，在页面底部

HTML:

<div class="detail" v-show="detailShow" @click="detailShow = false">
  <div class="detail-wrapper clearfix">  
    <div class="detail-main"></div> <!--内容层 -->
  </div>
  <div class="detail-close">
    <i class="icon-close"></i>  <！--图标 -->
  </div>
</div>

CSS:

.detail
  position :fixed
  z-index :100
  width :100%
  height :100%
  top :0
  bottom :0
  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