一款经典的stick footer布局

有时候会有需求将footer固定到底部。文章内容不足满屏时 footer在底部，超过满屏时footer在内容末尾

第一步，设置子盒子的坐标、位置以及如果长度超过最低高度的的处理

*{
    text-align: center;
    margin: 0;
}
 .wrapper{
    position: fixed;
    top: 0;
    left:0;
    width: 100%;
    height: 100%;
    overflow: auto;
    font-size: 20px;
    background: #00ff00;
}

 

第二步子盒子设置最小高度 给一个padding-bottom 等于footer高度 避免内容将footer遮盖

.wrapper .content{
    min-height: 100%;
    padding-bottom: 50px;
} 

第三步footer的height和margin-top要相等 且清除浮动

 .wrapper .footer{
    position: relative;
    width:100%;
    height: 50px;
    margin: -50px auto 0 auto;
    clear: both;
    text-align: center;
    background: black;
    color:white;
    line-height: 50px;
}

 

第四步，项目中使用

<div class="wrapper">
    <div class="content">
        这里是内容
    </div>

    <div class="footer">
        这里是footer的内容，固定在底部
    </div>
</div>