使用css讓Footer 保持在頁面底部的方法
如題這次要討論的是使用css方法，當然也可以通過js實現需求，雖然這里不做討論，但也歡迎大神評論指點~
本次方法源自《How to keep footers at the bottom of the page》
“Footer” 顧名思義，當然就是要在最下面的部分，但是，在開發時不知道有多少同學注意到這個問題，就是當頁面內容太少時，可能會出現footer下方還有一部分空白部分。這也是博主最近學習過程中遇到的問題。通過查找資料，這個問題得到了解決，于是便記錄下來。
先上兩張圖：
當container中的內容很少，不夠填滿整個div時，footer依然保持在底部
從圖中便看出，不作處理的話，頁面內容很少時，footer下會留有很多空白處
接下來就來看看如何用css對頁面做出處理
/*css*/
html,body {
margin:0;
padding:0;
height:100%;
color: #000;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#container {
padding:10px;
padding-bottom:60px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#6cf;
}
<!-- html -->
<div id="wrapper">
<div id="header">header</div>
<div id="container">container</div>
<div id="footer">footer</div>
</div>
首先需要在header，container，footer外添加一個盒子#wrapper把他們包住，
然后要將#wrapper設置樣式 min-height:100%; position:relative;
再通過給#footer設置position:absolute;bottom:0;
這樣#footer就會保持在頁面的最下方。
原文出處Roy'Blog：《使用css讓Footer 保持在頁面底部的方法》
感謝閱讀
