不能讓我的頁腳堅持底部

Question

我已經編了一個星期左右的時間，我正在通過我的自我學習（希望能解釋我在這段代碼中的很多錯誤）。

我試過很多例子讓我的頁腳粘在頁面的底部。 當我嘗試更改包裝器或頁腳的「位置：絕對」時，它會在瀏覽器窗口和頁眉之間產生間隙，或者將頁腳放在頂部。

我不知道如何解決這個問題。 （我的代碼的一些技巧也非常感謝！）

HTML http://pastebin.com/ksgJSUpz

CSS http://pastebin.com/i9nPtYkU

謝謝！

Answer 1

問題是，您在整個代碼中一直使用position:absolute。絕對定位打破了文檔的流動。

如果您使用相對定位或者如果您完全不定義定位（靜態位置），那麼這些元素將會一個接一個地運行。用你的代碼，你必須計算每個元素的高度結束開始下一個手動結束的地方。發生這種情況是因爲絕對定位元素不會將其他元素壓低。他們好像沒有身高。例如，你的標題高度爲100px;然後你開始你的絕對定位和頂部100px的信息;

你的頁腳會走到你要告訴他的絕對位置。問題在於你不知道該位置是什麼，因爲你有一個高度可變的元素。如果你把`bottom：0'與絕對定位標題將只是去坐在其父母的底部。它的父項在你的情況下是沒有定義特定高度的包裝。所以#wrapper獲取其內容的高度，但是因爲它的內容都是絕對定位在它內部的，正如我所說的那樣，打破了流動，它沒有從它們中獲得任何高度。相反#wrapper獲取窗口的高度，而不是整個文檔。

最好的事情是重新設計你的網頁，沒有絕對定位。

一些快速修復將是給您的包裝特定的高度像height: 1200px; 這將迫使你的頁腳去，坐在那些1200個像素

Example with height at wrapper

另一種解決方案是使用的底固定您的頁腳的位置。即使滾動，頁腳也會粘在窗口的底部。

Example with fixed positioning

但實際上你應該做的是從一開始就重新設計網頁，避免絕對定位的地方不需要。