CSS Sticky footers布局最优解决方案

在网页设计中，Sticky footers设计是最古老和最常见的效果之一，大多数人都曾经经历过。它可以概括如下：

如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。

这种效果不仅是无处不在，很受欢迎，而且实现起来看上去也非常容易。但实际上实现起来要比预期花的时间更多。此外，在CSS2.1中的解决方案中几乎都要给页脚设置一个固定高度。这是很脆弱的，很少是可行的。实际上实现这个效果过于复杂，而且还需要增加特定的标记和一些Hack手段。在CSS2.1中受到一些限制，但使用现代CSS，我们能把这个效果做得更好，那要如何做呢？

CSS Sticky footers布局最优解决方案：
经过实际开发探索，以下就是一个很好的例子：(特别注意这里的套路)

html套路:

<!-- 详情弹出层 -->
<div class="detail" v-show="detailShow">
    <div class="detail-wapper clearfix">//包一个高度min-height:100%的容器
        <div class="detail-main">//主要内容写在这里，注意padding-bottom必有
        </div>
    </div>
    <div class="detail-close"> //相当于footer，注意marigin-top要用负值顶上去
            <i class="iconfont icon-chahao" @click="hiddenDetail()"></i>
    </div>
</div>

css套路:

/* 详情弹出层 */
.detail{
    position: fixed;
    left:0;
    top:0;
    z-index: 100;
    width: 100%;
    height: 100%;
    background: rgba(7,17,27,0.8);
    overflow: auto;
}
.detail-wapper{
    min-height: 100%;
    overflow: hidden;
}
.detail-wapper .detail-main{
    margin-top:64px;
    padding-bottom: 96px;
}
.detail-close{
    height: 32px;
    line-height: 32px;
    margin-top: -64px;
    text-align: center;
}
.detail-close i{
    color: #fff;
    font-size: 32px;
}