使用css讓Footer 保持在頁面底部的方法

如題這次要討論的是使用css方法，當(dāng)然也可以通過js實(shí)現(xiàn)需求，雖然這里不做討論，但也歡迎大神評(píng)論指點(diǎn)~
本次方法源自《How to keep footers at the bottom of the page》

“Footer” 顧名思義，當(dāng)然就是要在最下面的部分，但是，在開發(fā)時(shí)不知道有多少同學(xué)注意到這個(gè)問題，就是當(dāng)頁面內(nèi)容太少時(shí)，可能會(huì)出現(xiàn)footer下方還有一部分空白部分。這也是博主最近學(xué)習(xí)過程中遇到的問題。通過查找資料，這個(gè)問題得到了解決，于是便記錄下來。
先上兩張圖：

當(dāng)container中的內(nèi)容很少，不夠填滿整個(gè)div時(shí)，footer依然保持在底部

從圖中便看出，不作處理的話，頁面內(nèi)容很少時(shí)，footer下會(huì)留有很多空白處
接下來就來看看如何用css對(duì)頁面做出處理

/*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外添加一個(gè)盒子#wrapper把他們包住，
然后要將#wrapper設(shè)置樣式 min-height:100%; position:relative;
再通過給#footer設(shè)置position:absolute;bottom:0;
這樣#footer就會(huì)保持在頁面的最下方。

原文出處Roy'Blog：《使用css讓Footer 保持在頁面底部的方法》

感謝閱讀