所謂“Sticky Footer”是一種網(wǎng)頁(yè)效果。即：頁(yè)面的內(nèi)容不足以撐開(kāi)整個(gè)屏幕的高度時(shí)肥荔，footer置于屏幕底部绿渣；當(dāng)內(nèi)容超過(guò)一屏?xí)r，footer會(huì)隨著內(nèi)容下移次企，在內(nèi)容底部怯晕。
如圖：
Sticky Footer
html 布局如下：
<div class="box">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
css實(shí)現(xiàn)方案：
flex布局
html,
body {
/* 關(guān)鍵 */
height: 100%;
}
.box {
min-height: 100%; /* 關(guān)鍵 設(shè)置最小高度*/
display: flex;
flex-direction: column; /* 改變主軸方向 */
}
.header,
.footer {
height: 100px;
}
.content {
flex: 1;
/* 自適應(yīng) */
}
absolute
html,
body {
/* 關(guān)鍵 */
height: 100%;
}
.box {
width: 100%;
min-height: 100%; /* 關(guān)鍵 */
position: relative; /* 相對(duì)定位 */
}
.header {
height: 100px;
}
.content {
padding-bottom: 100px;
}
.footer {
height: 100px;
position: absolute; /* 絕對(duì)定位 */
bottom: 0;
left: 0; /* IE 需要加 */
}
flex、flex-shrink缸棵、margin-top舟茶、vh（css單位）
.box {
height: 100vh;
display: flex;
flex-direction: column;
}
.header {
height: 100px;
flex-shrink: 0;
}
.footer {
height: 100px;
/* 自動(dòng)填滿(mǎn)flex布局之后剩余的空間 */
margin-top: auto;
/* 子元素的縮小比例 默認(rèn)為1: 空間不足時(shí)默認(rèn)會(huì)縮小 */
flex-shrink: 0;
}
flex、vh（css單位）
.box{
/* 關(guān)鍵 */
min-height: 100vh;
display: flex;
flex-direction: column;
}
.header,
.footer {
height: 100px;
}
.body{
flex: 1;
}
min-height堵第、calc
.header,
.footer {
height: 100px;
}
.content {
min-height: calc(100vh - 200px);
}
table
html,
body {
height: 100%;
}
.box {
display: table;
width: 100%;
min-height: 100%;
}
.header,
.footer {
height: 100px;
}
.content {
display: table-row;
height: 100%;
}
