當(dāng)頁(yè)面內(nèi)容過(guò)少時(shí)，頁(yè)腳會(huì)跟隨內(nèi)容，不會(huì)緊貼在頁(yè)面底部。如圖：

使用CSS計(jì)算屬性calc為內(nèi)容部分設(shè)置一個(gè)基于視口的最小高度。讓頁(yè)腳緊貼底部。

//視口高度減去頁(yè)腳的高度
main{
    min-height: calc(100vh - 101px);
}

上述方法必須要頁(yè)腳高度已知，使用flex布局可以完美解決問(wèn)題

<div class="con">
    <div class="a">
        <p>內(nèi)容文字</p>
        <p>內(nèi)容文字</p>
        <p>內(nèi)容文字</p>
        <p>內(nèi)容文字</p>
        <p>內(nèi)容文字</p>
    </div>
    <footer>
        <p>底部?jī)?nèi)容</p>
    </footer>
</div>
// 容器區(qū)塊使用彈性布局，
.con{
    display: flex;
    // 彈性布局內(nèi)容元素為豎向排列
    flex-flow: column;
    // 容器區(qū)塊最小高度為整個(gè)可視區(qū)域
    min-height: 100vh;
}
// 內(nèi)容區(qū)塊高度自動(dòng)伸展充滿(mǎn)可用空間
.a{
    flex: 1;
}