stick footer笔记

stick footer功能：

一、当页面内容未填充完可视区域时，button固定于底部，如图，“X”位于底部

二、页面内容超出可视区域，出现滚动条，“X”不遮挡内容，如图

 

实现原理：

布局：

<div class="wrap"> //第一层嵌套两个子层
    <div class="wrap-box"> //内容层
        <div class="wrap-main"></div>
    </div>
    <div class="close"> //关闭按钮
        <i class="icon-close"></i>
    </div>
 </div>

主要设置：

一、wrap:①position:fixed;②heighe:100%;③overflow:auto;

二、内容层wrap-box:①min-height:100%;（设置最小高度，撑满可视区）

三、wrap-main:①设置padding-bottom（用于腾出空间放按钮，内容超出可视区也不会遮挡按钮）

四、按钮close:①margin-bottom: -xxpx;（当内容不满可视区时，展示在容器底部）