CSS Sticky footer布局

stick footer就是让footer元素固定在底部，1当内容不足满屏时，footer紧贴最底部。2，满屏需要下拉时，footer就在内容的底部

通常用于提示的页面，下面有个x的按钮，这个按钮就是footer，它是用于关闭这个弹窗的，内容少时处在底部，多时下拉才显示。保证你都看完了。

html结构

<div class="detail">
<div class="detail-warpper clearfix">
<div class="detail-main">
内容区域，随便写
</div>
</div>
<div class="detail-close">x</div> //始终在底部
</div>

css代码：

.detail{
position: fixed; //总容器为全屏铺满 超出出现滚动条
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(7,17,27,.8);
overflow:auto;
}
.detail-warpper{  //内容不够长时保证也会显示全屏
min-height: 100%;
width: 100%;
}
.detail-main{
margin-top: 64px; //向上和屏幕顶部保持64px像素 随便设置
padding-bottom: 64px; //保证内容区底部有空白区间 必须和footer是相同的高度
}
.detail-close{
position:relative;
height:64px;
margin-top: -64px;//footer高度的负值
font-size: 32px;
color:#fff;
text-align: center;
}
.clearfix{  //用clearfix 主要是为了解决有的兼容问题
display: inline-block;
}
.clearfix:after{
display: block;
content: "";
height: 0;
line-height: 0;
clear: both;
visibility: hidden;
}

.bb{

height:32px;

background-color:#f1ee18;/所有识别/

.background-color:#00deff\9; /IE6、7、8识别/

+background-color:#a200ff;/IE6、7识别/

_background-color:#1e0bd1;/IE6识别/

}