簡述
sticky footer粘滯頁腳佈局是經常使用的CSS經典佈局之一，其表現形式是：頁腳始終在視口的底部，不管是內容區內容較少不足以佔據視口高度，還是內容區內容很多超過視口高度導致出現滾動條，頁腳都處於視口的底部，並且不會遮住內容。
表現形式
內容區內容不多
內容區內容很多
HTML代碼與CSS代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css sticky footer</title>
<style>
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
margin-bottom: -32px;
}
.footer {
height: 32px;
}
.push {
height: 32px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">
<p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p>
<p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p>
<!-- <p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p>
<p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p> -->
</div>
<div class="push"></div>
</div>
<div class="footer" style="background: yellow">footer</div>
</body>
</html>
原理分析
margin爲負值的意義
margin是盒模型的外邊距，當爲正時，表示盒模型向外擴張；當爲負時，表示盒模型向內收縮，收縮從而留出的空間可以給外部元素使用。而這部分空間會佔據原來盒模型的內邊距和內容盒子，所以有可能會影響盒模型的內容。
內容區內容不多時
如果想要頁腳始終在視口底部，那麼內容區一定要佔滿視口（但需要留下頁腳佔據的空間）。要想達到這一步，首先內容區的高度就必須是視口高度的100%（視口可能會調整大小，所以只能用百分數），其次要通過margin-bottom爲負值來給頁腳留出空間。這時候在內容區內容不多時可以達到效果。如上圖1。內容區的高度設爲100%的前提是，其父元素有確定高度纔行，所以body和html也需要設爲100%（因爲html元素是body的父元素，html元素的百分數相對於視口大小）。爲了不讓頁腳遮住內容區的內容，需要在內容區下方增加一個空白的元素，讓頁腳遮住這個空白元素，所以這個空白元素高度與頁腳高度一致。
CSS代碼爲
html, body {
height: 100%;
}
.wrapper {
height: 100%;
margin-bottom: -32px;
}
.push {
height: 32px;
}
.footer {
height: 32px;
}
內容區內容很多超過視口高度
此時出現滾動條，頁腳在視口底部，會遮住內容區的。因此我們需要將內容區的高度增加，這時候應該讓內容區的高度隨內容的高度自動增加，所以不能再使用height屬性了，我們使用min-height屬性來解決這個問題。
CSS代碼爲
.wrapper {
min-height: 100%; // 刪除上面CSS代碼中的height，用min-height來代替;
}
總結
通過min-height和margin-bottom負值來得到sticky footer的經典CSS佈局。需要注意有幾點