css 中 stick footer 布局实现

做项目中，我们在写弹框的时候，不管弹框的内容多或者少，可能需要一些内容需要固定在框底部，比如关闭按钮。stick footer 就是让 footer 元素固定在底部

1. 当内容不足满屏时，footer 紧贴最底部
2. 满屏需要下拉时，footer 就在内容的底部

以下主要用一种固定的结构实现 stick footer , 俗称套路, 看以下html结构:

    <div id="wrap">
        <div id="main" class="clearfix">
            <div id="content"></div>
            <div id="side"></div>
        </div>
    </div>
    <div id="footer"></div>

css样式:

    #wrap {
        height: auto; min-height: 100%;
    }
    #main {
        /* 必须使用和footer相同的高度 */
        padding-bottom: 150px;
    } 
    #footer { 
        position: relative;
        /* footer高度的负值 */
        margin-top: -150px;
        height: 150px;
        clear:both;
    }
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .clearfix {
        display: inline-block;
    }

转载于:https://www.cnblogs.com/liuyishi/p/9529712.html