頁腳置底（Sticky footer） 就是讓網(wǎng)頁的footer部分始終在瀏覽器窗口的底部。

當網(wǎng)頁內(nèi)容足夠長以至超出瀏覽器可視高度時，頁腳會隨著內(nèi)容被推到網(wǎng)頁底部； 但如果網(wǎng)頁內(nèi)容不夠長，置底的頁腳就會保持在瀏覽器窗口底部。

方法一：

main的margin-bottom屬性為負

html：

<div class="main">
    <!-- 內(nèi)容 -->
</div>
<div class="footer"></div>

css：

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

.main {
    min-height: 100%;
    background: #aaa;
    margin-bottom: -50px;
    padding-bottom: 50px;
}

.footer {
    height: 50px;
    background: #fff;
}

方法二：

footer的margin-top屬性為負

html：

<div class="main">
    <!-- 內(nèi)容 -->
</div>
<div class="footer"></div>

css：

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

.main {
    min-height: 100%;
    background: #aaa;
    padding-bottom: 50px;
}

.footer {
    height: 50px;
    background: #fff;
    margin-top:-50px;
}

方法三：

flexbox彈性盒布局

html：

<div class="main">
    <!-- 內(nèi)容 -->
</div>
<div class="footer"></div>

css：

html{
    height: 100%;
}

body{
    margin:0;
    padding:0;
    display: flex;
    flex-direction:column;
    min-height: 100%;
}

.main{
    flex:1;
    background:#aaa;
}

.footer{
    height: 50px;
    background:#fff;
}

方法四：

grid網(wǎng)格布局

html：

<div class="main">
    <!-- 內(nèi)容 -->
</div>
<div class="footer"></div>

css：

html{
    height: 100%;
}

body{
    margin:0;
    padding:0;
    display: grid;
    grid-template-rows: 1fr;
    min-height: 100%;
}

.main{
    background:#aaa;
}

.footer{
    height: 50px;
    background:lightblue;
}