如何讓Footer無論頁面長短都在最底部, 並和正文保持固定高度?

摘自:http://www.dewen.io/q/1


html結構:

  1. <div id="container">
  2. <div id="content">頁面正文</div>
  3. </div>
  4. <div class="footer"></div>

CSS樣式:

  
  1. html, body{
  2. height:100%;
  3. }
  4. #container {
  5. min-height:100%; /*使內容高度和body一樣*/
  6. margin-bottom:-80px;/*向上縮減80像素,不至於footer超出屏幕可視範圍*/
  7. }
  8. #content {
  9. padding-bottom:150px; /*這個是關鍵,處理頁面高度超出屏幕可視範圍時,控制內容和底部高度之間距離*/
  10. }
  11. #footer {
  12. height:80px;
  13. }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章