在网页设计中，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;
}
