sticky footer 实现页脚块位置根据页面内容长度变化

sticky footer，指的是当页面内容不够长的时候，页脚的位置粘贴在视窗底部；当页面内容足够长时，页脚块会被内容向下推送，位置显示在内容下方，不会遮挡内容

sticky footer比较常用的布局方式如下：

<div class="detail">
	<!--外层的这个wrapper与底部区域同级-->
	<div class="detail-wrapper clearfix">
		<div class="detail-main">
			<!--页面内容写在这-->
		</div>
	</div>
	<!--底部区域-->
	<div class="detail-close">
		<i class="icon-close"></i>
	</div>
</div>

样式如下（这个例子中我的最外层div是一个遮罩层，样式根据自己的需求修改）

.clearfix::after {
  content:"";
  display: block;
  height:0;
  line-height: 0;
  clear:both;
  visibility: hidden;
}
.clearfix{
  display: inline-block;
}

.detail {
	position:fixed;
	z-index:100;
	left:0;
	top:0;
	width:100%;
	height:100%;
	overflow:auto;   /*不能是hidden*/
	background:rgba(0,0,0,.5);
}
.detail-wrapper {
	min-height:100%;
	width:100%;
}
/*需要给底部的区域留位置，使用padding-bottom*/
.detail-main {
	padding-bottom:64px; 
	margin-top:64px;
}
/*底部区域*/
.detail-close {
	position:relative;
	width:32px;
	height:32px;
	margin:-64px auto 0 auto;   /*注意margin-top需要是负值*/
	clear:both;  
	font-size:32px;
}