粘性css頁腳與100％高度內容容器。

我使用這種技術的一個棘手的頁腳：http://ryanfait.com/sticky-footer/粘性css頁腳與100％高度內容容器。

我想創建一個圍繞我也封裝頁腳整個網站的邊界，但已經通過了整頁左右，但結束了與此：http://i.imgur.com/jy9vN.jpg

請注意白盒不會向下移動到頁腳。

這裏是的jsfiddle顯示這一問題：http://jsfiddle.net/hc3Xu/14/

*我以前問過沒有意識到這是頁腳類似的問題，我得到了一個答案，告訴我，這是高度：汽車重要的;在容器類中，contentcontainer的原因沒有擴展到100％。然而，刪除頁腳會導致頁腳未設置到頁面底部的問題。所以我不知道如何繼續。

來源

2012-01-25 Sackling

顯示，請設計。它究竟應該是什麼樣子？ – SublimeYe

對不起，不清楚。這是我希望實現的目標：http://i.imgur.com/Dn3Rn.jpg – Sackling

嘿，夥計。我有同樣的問題。使用了相同的粘性頁腳解決方案，並且具有我想要伸展的兩列內容。你設法使它工作？ :) – user1080533

相反的：

.container {min-height:100%; height: auto !important; height:100%; 
      margin: 0 auto -30px; width:980px; 
      background:URL(images/bg_sides.jpg) repeat-y #f4f4f4;}

嘗試類似：

.container {min-height:100%; height: auto !important; 
      margin: 0 auto -30px; width:980px; 
      box-shadow: inset #f4f4f4 0 0 0 20px, #BDBDBD 0 0 3px 3px; 
      -webkit-box-shadow: inset #f4f4f4 0 0 0 20px, #BDBDBD 0 0 3px 3px; 
      -moz-box-shadow: inset #f4f4f4 0 0 0 20px, #BDBDBD 0 0 3px 3px;}

然後，您還需要調整頁腳的左側和頂部邊緣與您contentContainer DIV看齊。

http://jsfiddle.net/z5geM/

來源

2012-01-29 16:18:35 Sophie

這適用於我。非常感謝。 – Sackling

存在問題。頁腳現在被白色div中的內容重疊。 – Sackling

你能提供一個問題的截圖嗎？如果你將一個1px的邊框應用到你的內部div，它也會有所幫助，所以很容易看到什麼地方重疊。 – Sophie