stick footer笔记

stick footer功能：

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

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

 

实现原理：

布局：

 //第一层嵌套两个子层
    
 //内容层
        

    
    
 //关闭按钮
        
    
 

主要设置：

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

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

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

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