清除絕對定位的側邊欄？

Question

我試圖阻止我的側邊欄漏入頁腳區域，並且我嘗試了很多建議，其中沒有一個似乎可行。

如果需要，我會考慮JavaScript，但寧願使用CSS。 Here's an example page，我想知道你是否使用了代碼檢查器？左側的&右側導航欄完全位於背景圖像的上方，並且內容是浮動的。

我希望內容能夠擴展而不會進入頁腳。

我只是不知道怎麼也看不到其他人，所以這是最後一次嘗試！

Answer 1

看起來你需要一個sticky footer。

Answer 2

像Jeroen在他的評論中說的。將<div id="left-container">,<div id="right-container">和<div id="middle">改爲float:left & position:relative。如果您這樣做，您需要將訂單更改爲<div id="left-container">，然後<div id="middle">，然後<div id="right-container">。可能需要調整一些盒子模型，但現在應該清除這些元素。我幾乎忘記提及刪除div的邊距。

Answer 3

從我所看到的情況來看，您只需要側欄的絕對位置，因爲中間框上的陰影。

對於舊版瀏覽器，我會將#middle設置得更寬以包含背景，並給.inside一個必要的邊距以將其與#middle分開（並賦予其背景之一）。

對於現代瀏覽器，我只是使用盒子陰影。

當然，所有的只是浮動的組合，沒有絕對的定位。