頁面爲絕對定位時頁腳到底

我有一個頁面，其中的部分由絕對定位的div構成。頁面爲絕對定位時頁腳到底

這很好，直到我試圖獲得一個頁腳到頁面上。

我的問題是，我不能使用底部屬性來放置頁腳，因爲底部屬性將它修復到屏幕的底部，而不是頁面。所以當頁面內容比屏幕更長時，頁腳就會進入內容。

而且我不能將頁腳放在元素流的底部，因爲沒有元素流。所有的div都是絕對定位的，所以如果我放入任何靜態或相對定位的東西，它會直接到頁眉頂部。

而且這些粘性頁腳都不工作，因爲它們依賴於元素流來將頁腳放在頁面的底部。

這裏是jsbin：http://jsbin.com/oxefev/edit#javascript,html

這個問題將是非常容易解決，如果有一個方法，使bottom CSS屬性轉到頁，而不是在屏幕的底部。

編輯：我可以只讓靜態地定位和使用margin-top屬性將其設置爲margin-top:1000px;迫使它到頁面的底部，但後來我不得不改變我每次添加或刪除內容這一頁。

來源

2012-02-04 Mark Kramer

這可能是因爲一個頁面沒有底限，它可能會永遠持續下去。是否有理由不能簡單地給你的頁腳提供超出你的內容的絕對位置？ – Umbrella 2012-02-04 15:16:47

該頁面確實有底部限制。每一頁都有一個你不能再滾動的點。這是我想要提到的一點。我可以將它放在最後一個元素之後，但是如果我在網站上製作多個頁面，該怎麼辦？兩頁上的頁腳不會處於同一高度。即使這不是問題，每次更改頁面上的內容時，我都必須更改頁腳的高度。不，這只是一個壞主意。只要將它自動放置在頁面底部就簡單多了。 – 2012-02-04 15:23:23

「無底限」意味着您可以隨時在下面添加更多內容，將底部向下推。這使得「底部」的像素位置不明確。 – Umbrella 2012-02-04 15:39:30

我的第一個建議是：不要絕對放置一切。它有什麼好處？

儘管如此，你可以實現你所尋求的與JavaScript的招標應用程序。喜歡的東西：

document.getElementById('footer').style.top = document.getElementById('content-wrapper').clientHeight + 150 + 'px';

編輯：

這也似乎工作，如果你調整你的頭的高度也不會改變需要（+/-基於框模型幾個像素）：

document.getElementById('footer').style.top = document.body.clientHeight + document.getElementById('footer').clientHeight + 'px';

來源

2012-02-04 15:36:44 Umbrella

@MarkKramer一旦您創建了多個網站，您將對此評論感到後悔。 – 2012-02-04 15:40:19

另外，好主意。我知道如何做到這一點，所以我不敢相信我沒有想到它= S – 2012-02-04 15:43:45

我已經做了4個網站，並完成了其他幾個人的工作。沒有理由不去絕對定位事物。 – 2012-02-04 15:44:25

jQuery（document）.height（）爲我返回正確，一致的跨瀏覽器結果。一旦你知道定位頁腳的內容的高度應該很容易。

來源

2012-11-07 11:19:22 Mike

頁面爲絕對定位時頁腳到底

回答

相關問題