sticky-footer写法（用于fixed布局）

有人经常问，我每次CSS布局position：fixed的时候，想要底部有个固定的元素类似这样

image

想要一直固定在底部，一般做法 直接是对于子元素进行position:absolute,可是这么做不是很理想，有时候会出现各种BUG，（比如屏幕的大小等等...）

废话不说，直接上代码

html结构：

<div class="posFixed">//外层fixed
    <div class="warp clearfix">//这里需要清除浮动
        <div class="main"></div>//内容写在里面
    </div>
    <div class="close">X</div>//关闭
</div>

css代码：

       .clearfix {
            display: inline-block;
        }
        
        .clearfix::after {
            display: block;
            content: " ";
            height: 0;
            line-height: 0;
            visibility: hidden;
            clear: both;
        }
        
        .posFixed {
            position: fixed;
            left: 0;
            top: 0;
            overflow: auto;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .8);
        }
        
        .warp {
            min-height: 100%;
        }
        
        .main {
            margin-top: 60px;
            padding-bottom: 60px;
        }
        
        .close {
            position: relative;
            width: 60px;
            height: 60px;
            margin: -60px auto 0 auto;
            clear: both;
            color: darkorchid;
            font-size: 30px;
        }

如果main内容特别多的话，会自动出现滚动条，而close也会随着滚动条向下移。

（第一次写，不喜勿喷！！！）