首頁 > 開發者 > 網站開發

CSS + DIV 讓頁尾始終底部

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：覆蓋   pad   設定   osi   頁面   min   sdn   toc   -name   

 

1、利用 bottom 屬性？

在實踐之前，很容易聯想到用 CSS 裡面的 bottom 屬性讓頁尾在最下面，可是這個是行不通的。如果使用了如下方法：

 

 

[css] view plain copy  print?
  1. footer  
  2. {  
  3.   bottom: 0px;  
  4. }  

我可以很誠實地告訴你，寫了根沒寫壓根就沒區別。因為版面預設用的是 “position: relative;”，這會讓版面從上至下地排布，而不能夠獨立地讓 footer 始終在頁面的最底部。

 

 

position: fixed？

那麼自然就會想說，那如果用“position: fixed;”屬性呢？

 

[css] view plain copy  print?
  1. footer  
  2. {  
  3.   position: fixed;  
  4.   bottom: 0px;  
  5. }  

這個也是不行的，因為“fixed”會讓 div 相對瀏覽器，而非頁面。那麼出現的情況將是無論怎麼移動頁面，始終都有一個 footer 在瀏覽器的底部，不甚美觀。

 

 

position: absolute？

這個也是不行的。用了這個屬性，會有一種初始化的效果，讓 footer 一開始就在瀏覽器的最底部，然後你拉動頁面，它不會落到頁面最低部，而是上去了。實際上就是與其他網頁內容產生了重疊。這個也是絕對不允許的。

 

 

 

2、解決方案

在解決的時候，我查了相當多的資料。如果用純 CSS 的話，似乎都指向一種叫 Sticky Footer的方法。不過網上的基本都是抄來抄去，只有代碼，沒有解釋什麼的，我就不吐嘈了。

 

原理解析

這種方法的原理很簡單，用到了 2 個屬性：min-height 和 margin。

其中，min-height 都有個很奇特的屬性值：100%。這個屬性值是指當前瀏覽器視窗的高度，實際上就是能顯示的最大高度（一個螢幕的高度）了。那麼自然可以聯想到，如果將內容部分設成“min-height: 100%”，就能夠將內容部分佔有一個螢幕的高度，那麼頁尾起碼會在螢幕的外面。只要稍加改進，便能融入 Header、Content、Footer 這三個部分，並使得 Footer 起碼在螢幕的最底部，而且當內容長度增加時，會在頁面的最後面，而不至於遮擋內容。

可是要注意的是，“100%”的這個屬性對於“height”或者“min-height”來說有點奇怪，它在使用之前貌似要對“100%”的定義進行初始化。而我們知道，“html”這個結點是沾滿一個螢幕的，那麼就要先寫這樣的內容：

 

[css] view plain copy  print?
  1. body, html  
  2. {  
  3.   height: 100%;  
  4. }  

一個值得關注的是， 如果我們用的是 ASP.NET 架構，因為它是基於 form 的，所以僅僅設定 body 和 html 還不夠，還要設定 form 的相應屬性：

 

 

[css] view plain copy  print?
  1. form  
  2. {  
  3.   height: 100%;  
  4. }  

而為了頁首與頁尾緊貼瀏覽器邊框，我們還要設定相關的 margin 與 padding 為 0，以防止空隙的出現。而為了簡單起見，就對全域所有的容器都設定這樣的一個預設值吧。

 

 

[css] view plain copy  print?
  1. *  
  2. {  
  3.   margin: 0;  
  4.   padding: 0;  
  5. }  

 

好了，到了這裡就可以放心地去用“min-height: 100%;”了。

那麼怎麼解決在內容很少的時候，頁尾能夠顯示在瀏覽器的最底部，而不是什麼情況都被置於一個螢幕的高度之外呢？

可能看到上面的第 2 個我說的要使用的屬性，大家就大概明白了。對，就是用 margin 這個屬性。不過要聲明的一點是，下面的方法用到了一些不太符合規範的方法，就是加多了一個空 div 用作顯示格式定製，而其本身不起任何作用。

先看看網頁的 html 文本來瞭解一下架構吧：

[html] view plain copy  print?
  1. <div class="Wrapper">  
  2.   <div class="Header"></div>  
  3.   <div class="Content"></div>  
  4.   <div class="FooterPush"></div>  
  5. </div>  
  6. <div class="Footer"></div>  

可見，頁首與內容都被一個叫“Wrapper”的容器包著，然後在他們後面有個叫“FooterPush”的東西，其實這個就是我之前說的僅用於控制顯示格式的空 div 了。然後，Footer 是置於所有內容之外的。

然後我們這樣思考：如果 FooterPush 的高度與 Footer 相同，然後 Footer 有一個“margin-top”的屬性，它的值是 Footer 的高度的負值，即例如 Footer 的高度是 120px，然後：

[css] view plain copy  print?
  1. .Wrapper .FooterPush  
  2. {  
  3.   height: 120px;  
  4. }  
  5.                              
  6. .Footer  
  7. {  
  8.   margin-top: -120px;  
  9.   height: 120px;  
  10. }  

那麼發生的情況將會非常神奇，實際上就是 Footer 剛好就覆蓋在 FooterPush 的上面了。那麼這個時候，我們只要將 Wrapper 的高度設為“100%”，這樣所有的東西就至少能夠在一個螢幕內現實完畢了。

這樣，就能夠達到當內容少時，Footer 最高能夠在一個螢幕的最底部顯示；而當內容比較長的時候，Footer 能夠很乖巧地在所有內容的後面，而不至於遮擋內容。

OK，大工告成了吧！那我就貼個完整些的代碼吧。

 

完整代碼

Html：

[html] view plain copy  print?
  1. <body>  
  2. <form> <!-- 如果用的是 Asp.Net 就可能會有這個結點 -->  
  3.   <div class="Wrapper">  
  4.     <div class="Header"></div>  
  5.     <div class="Content"></div>  
  6.     <div class="FooterPush"></div>  
  7.   </div>  
  8.   <div class="Footer"></div>  
  9. </form>  
  10. </body>  

CSS:

 

[css] view plain copy  print?
  1. *  
  2. {  
  3.   margin: 0;  
  4.   padding: 0;  
  5. }  
  6.      
  7. html, body, form  
  8. {  
  9.   height: 100%;  
  10. }  
  11.      
  12. .Wrapper  
  13. {  
  14.   min-height: 100%;  
  15. }  
  16.      
  17.   .Wrapper .FooterPush  
  18.   {  
  19.     height: 120px; /* Footer 的高度 */  
  20.   }  
  21.      
  22. .Footer  
  23. {  
  24.   clear: both; /* 清除浮動元素格式 */  
  25.   position: relative;  
  26.   margin-top: -120px; /* Footer 高度的負值 */  
  27.   height: 120px;  
  28. }  

CSS + DIV 讓頁尾始終底部

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More