css sticky footer

页面布局内容不足一屏时候固定内容底部（在页面底部），超出一屏时候在页面内容底部

实现：

 1、结构

<div class="detail">
                   <div class="detail-wrapper">
                     <div class="detail-main">
                       内容区域
                     </div>
                  </div>
                  <div class="detail-close">x</div>
                </div>

2、样式

.detail{
                      position:fixed;
                      top:0;
                      left:0;
                      width:100%;
                      height:100%;
                      overflow:auto;
                      background:rgba(7,17,27,0.8);
                      color:#ffffff;
                text-align:center; 

}
                .detail-wrapper{min-height:100%;} /*主要，让一个内容的父层最小撑满屏幕高度*/
                .detail-main{padding-bottom: 64px;}/*主要，然后给内容区域留一个空白的正好要固定的底部的高度*/
                .detail-close{margin-top:-64px;}/*主要，向上移动改固定层==上面内容的留白高度*/  

3.效果