css sticky footer写底部布局

html结构：.detail里包括一个内容包装器一个关闭按钮，将内容放在内容包装器里

<div  class="detail" v-show="detailShow" transition="fade">
    <div class="detail-wrapper clearfix">
        <div class="detail-main">
            <p class="content">内容区域</p>
        </div>  
    </div>
    <div class="detail-close" @click="hiddenDetail">
        <i class="icon-close"></i>
    </div>
</div>

stylus代码：

.detail
    position fixed
    top 0
    left 0
    z-index 100
    width 100%
    height 100%  //总容器为全屏，所以高度为100％
    overflow auto  //如果内容太长，会显示滚动条查看其余内容。
    .detail-wrapper
        min-height 100%  //如果内容不够长时，也保证内容有全屏长度
        .detail-main
            padding-bottom 64px  //保证内容content区域的底部有64px的空白
    .detail-close
        position relative
        width 32px
        height 32px
        margin -64px auto 0 auto //让关闭按钮向上伸入64px，正好把内容区的64px空白补上；
        clear both
        font-size 32px            

效果如下：