頁腳置底（Sticky footer）就是讓網(wǎng)頁的footer部分始終在瀏覽器窗口的底部冒嫡。
當(dāng)網(wǎng)頁內(nèi)容足夠長以至超出瀏覽器可視高度時哑姚，頁腳會隨著內(nèi)容被推到網(wǎng)頁底部腾窝；但如果網(wǎng)頁內(nèi)容不夠長，置底的頁腳就會保持在瀏覽器窗口底部专缠。
實(shí)現(xiàn)方法
1. 將內(nèi)容部分的底部外邊距設(shè)為負(fù)數(shù)
這是個比較主流的用法狰挡，把內(nèi)容部分最小高度設(shè)為100%捂龄，再利用內(nèi)容部分的負(fù)底部外邊距值來達(dá)到當(dāng)高度不滿時，頁腳保持在窗口底部加叁，當(dāng)高度超出則隨之推出的效果倦沧。
content
html,body{height:100%;margin:0;}.wrapper{min-height:100%;/* 等于footer的高度 */margin-bottom:-50px;}.footer,.push{height:50px;}
這個方法需要容器里有額外的占位元素（如.push）
需要注意的是.wrapper的margin-bottom值需要和.footer的負(fù)的height值保持一致，這一點(diǎn)不太友好它匕。
2. 將頁腳的頂部外邊距設(shè)為負(fù)數(shù)
既然能在容器上使用負(fù)的margin bottom展融，那能否使用負(fù)margin top嗎？當(dāng)然可以豫柬。
給內(nèi)容外增加父元素告希，并讓內(nèi)容部分的底部內(nèi)邊距與頁腳高度的值相等。
content
html,body{height:100%;margin:0;}.content{min-height:100%;}.content-inside{padding:20px;padding-bottom:50px;}.footer{height:50px;margin-top:-50px;}
不過這種方法和上一種一樣烧给，都需要額外添加不必要的html元素燕偶。
3. 使用calc()設(shè)置內(nèi)容高度
有一種方法不需要任何多余元素——使用CSS3新增的計(jì)算函數(shù)calc()
這樣元素間就不會有重疊發(fā)生，也不需要控制內(nèi)外邊距了～
content
.content{min-height:calc(100vh-70px);}.footer{height:50px;}
可能你會疑惑內(nèi)容高度calc()中為什么減去70px创夜，而不是footer的高度50px杭跪，因?yàn)榧僭O(shè)倆元素有20px的間距仙逻，所以70px=50px+20px
不過驰吓，你不必在意這些~
4. 使用flexbox彈性盒布局
以上三種方法的footer高度都是固定的，通常來說這不利于網(wǎng)頁布局：內(nèi)容會改變系奉，它們都是彈性的檬贰，一旦內(nèi)容超出固定高度就會破壞布局。所以給footer使用flexbox吧缺亮，讓它的高度可以變大變小變漂亮~（≧?≦）
content
html{height:100%;}body{min-height:100%;display:flex;flex-direction:column;}.content{flex:1;}
你還可以在上面添加header或在下面添加更多元素翁涤。可從以下技巧選擇其一：
flex: 1使內(nèi)容（如：.content）高度可以自由伸縮
margin-top: auto
請記住，我們有《Flexbox完整指南（英）》呢～
5. 使用Grid網(wǎng)格布局
grid比flexbox還要新很多葵礼，并且更佳很簡潔号阿，我們同樣有《Grid完整指南（英）》奉上～
content
html{height:100%;}body{min-height:100%;display:grid;grid-template-rows:1frauto;}.footer{grid-row-start:2;grid-row-end:3;}
遺憾的是，網(wǎng)格布局（Grid layout）目前僅支持Chrome Canary和Firefox Developer Edition版本鸳粉。
總結(jié)
其實(shí)頁腳置底的布局隨處可見扔涧，很多人也和我一樣覺得比較簡單，但可能只知其然罷了届谈，?偶然看到CSS-TRICKS上介紹頁腳置底的文章覺得不錯枯夜，遂譯之。
這是我的處女譯文艰山，不足之處請多指教湖雹。
原文作者：Chris Coyier
譯者：廖柯宇
