sticky footer布局

写法

<div v-show="detailShow" class="detail">
  <div class="detail-wrapper clearfix">
    <div class="detail-main"></div>
  </div>
  <div class="detail-close"></div>
</div>

.detail .detail-wrapper{min-height: 100%;}
.detail .detail-wrapper .detail-main{ padding-bottom:64px;}
.detail .detail-close{margin: -64px auto 0 auto;}

sticky footer大致思路：如果当detail-main的内容没有超过100%,那么会由最外层的detail-wapper将detail-close撑到最下面，而detail-close有一个负的margin-top，所以会在最底部显示。而一旦detail-main的内容超过了100%，那么将会由detail-main将detail-close撑到最下面，而detail-main的padding-bottom就是detail-main显示的区域，一样在最下面。所以无论detail-main的内容是否超过了100%，detail-close始终都能在最下面显示，这就是stuicky footer布局，当然实现方法不仅仅这一种，还有其他实现方式