最高效和兼容的方式實現對接頁腳

Question

我試圖做一個CSS模板如下：

1. 碼頭頁腳底部時，沒有足夠的內容來 填充頁面
2. 伸展頁眉和頁腳背景橫跨整個寬度
3. 位置在頁面

這中間所有內容的代碼我有，對他幫助創建回覆： http://tinkerbin.com/lCNs7Upq

我的問題是，我已經看到了幾種方法來實現這一點。這是最好的嗎？這似乎是一個恥辱，必須有空格，以及這是一個閃光？

Answer 1

可以使用CSS修復和元素頁腳：

position: fixed; 
bottom: 0; 

不過，我試圖找出什麼正是你想要做的。

如果頁面和頁腳是div，頁眉和頁腳應自動遍歷頁面100％。

你的中間部分可以設置爲高度：auto;通過css並填充視圖，將頁腳一直推到底部，但要做到這一點，您還必須將主體設置爲100％才能使其工作。

html, body, #content { 
    height: 100%; 
    min-height: 100%; 
} 
#header { 
    height: 100px; 
    width: 100%; 
    background: blue; 
    position: fixed; 
    top: 0; 
} 
#content { 
    height: auto; 
    margin: 100px auto; 
    background: green; 
} 
#footer { 
    position: fixed; 
    bottom: 0; 
    height: 100px; 
    width: 100%; 
    background: red; 
} 

你的HTML應該看起來有點像這樣：

<div id="header"></div> 
<div id="content"></div> 
<div id="footer"></div> 

工作實例：http://jsfiddle.net/s4rT3/1/

Answer 2

這是我見過的最好的例子：

http://css-tricks.com/snippets/css/sticky-footer/