CSS粘滯頁腳 - 當內容div包含大量文本時沒有滾動條

我試圖建立一個粘性頁腳。我看着ryanfaits的版本，並在這一個http://matthiasschuetz.com/content/extras/css_template01.html CSS粘滯頁腳 - 當內容div包含大量文本時沒有滾動條

最後一個工作得很好，但問題是，當我把大量的內容放入content-div，頁腳下降，沒有滾動條在內容div。我試着在content-div中設置min-height，max-height，height，當然overflow = auto和overflow-y。最後一個顯示至少一個禁用的滾動條，但仍然無法正常工作。

任何想法？林很失望:(

非常感謝！羅恩

來源

2011-08-27 Ron

你能告訴我們你的代碼嗎？ – xec

我剛剛使用這兩個網站的代碼。 – Ron

看到他們的代碼有效，但是當你試圖實現它時，我不禁感到你的實現和你引用的來源之間必然存在不一致，這就是爲什麼我會喜歡看你嘗試過的東西至今。也許你只是缺少內容容器的底部邊距？ – xec

看一看

http://www.cssstickyfooter.com/

如果我使用http://matthiasschuetz.com/content/extras/css_template01.html和擴大它不顯示我的DIV滾動條的內容。也許你應該在網上發佈你的HTML/CSS，讓人們可以看看，如果這不幫助你。

來源

2011-08-27 11:42:50

這一個不適合主要（或內容）-div中較長的文本.... – Ron

首先將此添加到您的CSS

html { 
    height: auto; 
    min-height: 100%; 
    overflow-y: scroll; 
}

所有第二我沒有嘗試你的粘頁腳，但我經常用這一個 http://ryanfait.com/sticky-footer/

這工作得很好。

來源

2011-08-27 11:44:24 Johansrk

這很好，但我有兩個滾動條。一個用於整個頁面，另一個用於content-div。我只需要一個內容div。當滾動瀏覽內容時，我想讓剩下的東西留在原來的位置。順便說一句：我也嘗試了ryanfaiits，但是頁腳「吃掉」了內容div的底部 - 我希望它結束在頁腳的上方 - 或者與我的第一個解決方案相同。任何進一步的想法如何解決我的問題？ thx再次！ – Ron

Ron 我有同樣的問題，所以是的，你的問題是有效的粘腳。您可以嘗試將以下內容放置在內容從頂部開始130px的內容容器中。

#content-container { 
margin-top:130px; 
position: absolute; 
top: 0; 
bottom: 0; 
left: 0; 
right: 0; 
overflow: auto; 
}

其實我結束了做這使得整個包裝的div滾動：

#wrapper { 
min-height:100%; 
height: auto !important; 
height: 100; 
margin: 0 auto; 
position: absolute; 
top: 0; 
bottom: 0; 
left: 0; 
right: 0; 
overflow: auto;

}

#footer-container { 
background-color:#263959; 
color:#FFF; 
height:110px; 
min-width:1000px; 
width:100%; 
overflow:hidden; 
position:absolute; 
bottom:0;

}

來源

2011-11-01 14:42:03

CSS粘滯頁腳 - 當內容div包含大量文本時沒有滾動條

回答

相關問題