CSS：滾動時背景圖像不填充 - redux

我正在尋求幫助，嘗試解決我的背景圖像填充問題。我想要有一個粘性的頁腳，我終於想通了，但現在如果我在一個較小的窗口中查看我的網站，然後向下滾動，我的背景圖像就會消失。我知道這是由於我的高度設置爲100％，這使得我的圖像基於初始視口大小，但我似乎無法完成任何修復。CSS：滾動時背景圖像不填充 - redux

這是我正在研究的網站（仍在開發中）：http://student.plattsburgh.edu/stipl001/index.html。

在一個小窗口中查看此頁面時，最佳效果是：http://student.plattsburgh.edu/stipl001/resume.html。

我已經閱讀了很多在各種網站上試圖找出它的帖子（包括這一個：CSS: background image does not fill when scrolling），但我沒有任何運氣。我嘗試設置所有不同的CSS屬性，包括一些較新的屬性。然後我用overflow屬性進行了實驗，但它隱藏了我所有的文本或者創建了一個奇怪的滾動條，這使得我的文本在標題上向上滾動。我也嘗試將我的頁面背景從正文移動到html，並將容器背景從容器移動到正文，但是它沒有改變任何內容，所以我必須做出錯誤的事情（也許事實是我有兩個背景圖像需要處理？）。

我只是一個編碼新手，一直在教我自己，所以我會很感激具體的建議，以什麼方法修復這將是最好的我的網站，以及我如何能夠實施它。在這個問題上花了大約10個小時的時間後，我終於明白了。

非常感謝！

來源

2011-12-04 kyreth

只是改變最小高度：100％至最小高度：1092px（圖像高度），你會沒事的......

編輯：

前面的回答有點太快速，第二次查看代碼後，我注意到這個錯誤是由浮動列造成的：如果你浮動一個元素，容器元素將不會繼承浮動元素的高度 - 這就是爲什麼高度設置爲100％初始窗口，如果內容列變長，則不會展開。這可以通過在#container中添加一個額外的元素來解決，在#rightcolumn之後添加一個明確的：兩者都是 - 這將強制父元素接管其內容的高度。

查看http://jsfiddle.net/uS7Ba/1/的簡化示例，包括改進的固定頁腳。

希望它有幫助...

來源

2011-12-04 20:21:35 ptriek

感謝您的意見！這就是我最初設置網站的方式。它確實有效，但它也意味着人們必須通過空白區域向下滾動才能看到頁腳，這正是我試圖通過使最小高度：100％來避免的原因。我猜如果我找不到另一種替代方案，我將不得不再次爲高度設置一個px值，但我希望不必這樣做。 – kyreth

是的，我剛纔意識到。但是，正如你提到的那樣 - 你的固定頁腳也不能正常工作......給我一分鐘，我會看看我是否可以爲你解決一些問題 – ptriek

你是我的英雄！這正是我所需要的。我已經把#footer下的clear：both屬性，但是沒有想到把它放在#container中。我現在感覺好多了，謝謝你的幫助！編輯：就腳註的格式而言，我嘗試使用鏈接中的設置，但我不認爲我正在尋找固定頁腳;我喜歡它卡在頁面的底部，即使這意味着它不在屏幕上。我現在編碼的方式有什麼特別的錯誤嗎？ – kyreth

CSS：滾動時背景圖像不填充 - redux

回答

相關問題