CSS+DIV讓頁尾始終保持在頁面底部

華山青竹發表於2015-03-30
CSS

來源：David`s Blog     http://www.DavidQiu.com/

文章連結：http://blog.davidqiu.com/post/2013-06-17/40051753968

 

相關參考：

http://www.cnblogs.com/chenyuming507950417/p/4003651.html

http://www.cnblogs.com/ahjesus/archive/2011/11/26/2263986.html

 

下面是David部落格的原文

博主研究了兩天多，終於利用 CSS+DIV 讓頁尾始終在頁面的最底部了  T T

 1、利用 bottom 屬性？

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

footer
{
  bottom: 0px;
}

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

 

position: fixed？

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

footer
{
  position: fixed;
  bottom: 0px;
}

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

 

position: absolute？

那麼又想了，如果用“position: absolute”呢？

footer
{
  position: absolute;
  bottom: 0px;
}

這個也是不行的。用了這個屬性，會有一種初始化的效果，讓 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”這個結點是沾滿一個螢幕的，那麼就要先寫這樣的內容：

body, html
{
  height: 100%;
}

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

form
{
  height: 100%;
}

 

 

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

*
{
  margin: 0;
  padding: 0;
}

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

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

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

先看看網頁的 html 文字來了解一下框架吧：

<div class="Wrapper">
  <div class="Header"></div>
  <div class="Content"></div>
  <div class="FooterPush"></div>
</div>
<div class="Footer"></div>

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

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

.Wrapper .FooterPush
{
  height: 120px;
}
                           
.Footer
{
  margin-top: -120px;
  height: 120px;
}

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

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

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

 

完整程式碼

Html：

<body>
<form> <!-- 如果用的是 Asp.Net 就可能會有這個結點 -->
  <div class="Wrapper">
    <div class="Header"></div>
    <div class="Content"></div>
    <div class="FooterPush"></div>
  </div>
  <div class="Footer"></div>
</form>
</body>

css

*
{
  margin: 0;
  padding: 0;
}
   
html, body, form
{
  height: 100%;
}
   
.Wrapper
{
  min-height: 100%;
}
   
  .Wrapper .FooterPush
  {
    height: 120px; /* Footer 的高度 */
  }
   
.Footer
{
  clear: both; /* 清除浮動元素格式 */
  position: relative;
  margin-top: -120px; /* Footer 高度的負值 */
  height: 120px;
}

by: David Qiu.

 

再次對原文作者表示感謝。在此收藏，只是當做筆記。

 


相關文章