本文主要介紹一個(gè)Footer元素如何粘住底部，使其無論內(nèi)容多或者少，F(xiàn)ooter元素始終緊靠在瀏覽器的底部。我們知道，當(dāng)內(nèi)容足夠多可以撐開底部到達(dá)瀏覽器的底部，如果內(nèi)容不夠多，不足以撐開元素到達(dá)瀏覽器的底部時(shí)，下面要講的布局就是解決如何使元素粘住瀏覽器底部。需求看下圖：
全局增加一個(gè)負(fù)值下邊距等于底部高度
有一個(gè)全局的元素包含除了底部之外的所有內(nèi)容。它有一個(gè)負(fù)值下邊距等于底部的高度。
HTML
content
CSS
html,body{height:100%;margin:0;
}
.wrapper{min-height:100%;/*?Equal?to?height?of?footer?*/
/*?But?also?accounting?for?potential?margin-bottom?of?last?child?*/
margin-bottom:?-50px;
}
.footer,
.push{height:50px;
}
演示
這個(gè)代碼需要一個(gè)額外的元素.push等于底部的高度，來防止內(nèi)容覆蓋到底部的元素。這個(gè)push元素是智能的，它并沒有占用到底部的利用，而是通過全局加了一個(gè)負(fù)邊距來填充。
順便給大家推薦一個(gè)裙，它的前面是 537，中間是631，最后就是 707。想要學(xué)習(xí)前端的小伙伴可以加入我們一起學(xué)習(xí)，互相幫助。群里每天晚上都有大神免費(fèi)直播上課，如果不是想學(xué)習(xí)的小伙伴就不要加啦。（537631707）
底部元素增加負(fù)值上邊
雖然這個(gè)代碼減少了一個(gè).push的元素，但還是需要增加多一層的元素包裹內(nèi)容，并給他一個(gè)內(nèi)邊距使其等于底部的高度，防止內(nèi)容覆蓋到底部的內(nèi)容。
HTML
content
CSS
html,body{height:100%;margin:0;
}
.content{min-height:100%;
}
.content-inside{padding:20px;padding-bottom:50px;
}
.footer{height:50px;margin-top:?-50px;
}
演示
使用calc()計(jì)算內(nèi)容的高度
HTML
content
CSS
.content{min-height:calc(100vh?-?70px);
}
.footer{height:50px;
}
演示
給70px而不是50px是為了為了跟底部隔開20px，防止緊靠在一起。
使用flexbox
HTML
content
CSS
html{height:100%;
}body{min-height:100%;display:?flex;flex-direction:?column;
}
.content{flex:1;
}
演示
使用grid布局
HTML
content
CSS
html{height:100%;
}body{min-height:100%;display:?grid;grid-template-rows:1fr?auto;
}
.footer{grid-row-start:2;grid-row-end:3;
}
演示
grid早于flexbox出現(xiàn)，但并沒有flexbox被廣泛支持，你可能在chrome? Canary或者Firefox開發(fā)版上才可以看見效果
