1、利用 bottom 屬性？
在實踐之前，很容易聯想到用 CSS 里面的 bottom 屬性讓頁腳在最下面，可是這個是行不通的。如果使用了如下方法：
- footer
- {
- bottom: 0px;
- }
我可以很誠實地告訴你，寫了根沒寫壓根就沒區別。因為版面默認用的是 “position: relative;”，這會讓版面從上至下地排布，而不能夠獨立地讓 footer 始終在頁面的最底部。
position: fixed？
那么自然就會想說，那如果用“position: fixed;”屬性呢？
- footer
- {
- position: fixed;
- bottom: 0px;
- }
這個也是不行的，因為“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”這個結點是沾滿一個屏幕的，那么就要先寫這樣的內容：
- 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;
- }