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;(当内容不满可视区时,展示在容器底部)