如何实现页脚紧贴页面底部

[chenxiaochun]

假设html结构定义为以下形式：

<div class="wrapper">这是wapper</div>
<footer>这里是footer</footer>

第一种方法

body{
    margin: 0;
    display: flex;
    flex-flow: column;
    min-height: 100vh;
}
.wrapper{
    background: #ccc;
    flex: 1;
    text-align: center;
}
footer{
    height: 80px;
    background: #333;
    color: #fff;
    text-align: center;
}

第二种方法

body{
    margin: 0;
}
.main{
    background: #ccc;
    text-align: center;
    min-height: calc(100vh - 80px);
}
footer{
    height: 80px;
    background: #333;
    color: #fff;
    text-align: center;
}

这个方法的实现关键点是：

min-height: calc(100vh - 80px)

但是，你不能把它写成：

min-height: calc(100vh-80px)

看出来没有？它们之间的区别就是减号两侧必须要带有一个空格，否则不会起作用。

第三种方法

html, body{
    height: 100%;
    margin: 0;
}
.main{
    background: #ccc;
    text-align: center;
    min-height: 100%;
    margin-bottom: -80px;
    paddinb-bottom: 80px;
    box-sizing: border-box;
}
footer{
    height: 80px;
    background: #333;
    color: #fff;
    text-align: center;
}