佈局固定寬度，具有固定頁腳的全高，全寬

Question

我可以在佈局上使用一些幫助。這就是我想要實現：

，規格如下：

• 頭已經固定高度
• 頁腳始終處於底部，具有全寬（100％ ）
• 內容有固定寬度
• 內容基本上有全高減去頁腳，但重疊頁腳正好20px

這當然必須在內容比視口短且長的情況下工作。 我一直在玩這個幾個小時，我只是無法完成所有的功能。

我創建了一個搗鼓在這裏：http://jsfiddle.net/Sq4Pk/6/

這種解決方案的問題是目前：

• 視得到越短，內容重疊頁腳（必須以20像素）
• 內容部分不填充視口

這甚至可能嗎？有人能幫我解決這個問題嗎？

我已經試過這些解決方案及其變化，但兩者都是從我的用例稍有不同：

• http://peterned.home.xs4all.nl/examples/csslayout1.html
• http://www.cssstickyfooter.com

非常感謝您的幫助！

克里斯

Answer 1

我創建了一個撥弄着一個可能的解決方法，在頁腳插入兩個額外的div來假的覆蓋。

一個令人討厭的缺點：在Chrome中，最高的div（用於屏蔽陰影）在調整大小後似乎改變了1px。 FF + IE很好。

http://jsfiddle.net/Sq4Pk/3/

編輯：發現在Chrome像素移位修復：http://jsfiddle.net/Sq4Pk/4/

EDIT2：或者如果它是使用jQuery的選項，結果甚至略勝一籌：http://jsfiddle.net/Sq4Pk/5/