CSS動態定位頁腳（粘性頁腳問題）

我試圖達到粘頁腳所做的相同效果，但是我遇到了一個問題，它不會在任何教程或問題中出現：我的頁腳高度也是動態的。CSS動態定位頁腳（粘性頁腳問題）

我在頁腳有一些新聞項目，所以頁腳的高度根據這些新聞項目的長度而改變。顯然，當內容的高度小於瀏覽器的view-port時，我希望footer被絕對定位到頁面的底部，而當height高於實際的view-port時，相對於內容。

目前我在jQuery中成功實現了這個功能，但是我想要一個純CSS方法（如果有的話），因爲有些用戶在其瀏覽器中禁用了JavaScript。

非常感謝！

編輯：

我的代碼是非常常用的：我有一個<header>，一個<aside>，一個<section>在我<body>標籤<footer>。在jQuery中，我幾乎將這些元素的高度總和（不包含頁腳）與瀏覽器視圖端口進行比較。如果值更大，我會在頁腳中添加position:relative，否則我會添加一個position:absolute; bottom:0。

來源

2011-03-01 linkyndy

我們可以看到您的代碼，還是我們必須猜測？：D – Kyle 2011-03-01 13:44:56

我編輯了我的問題。 – linkyndy 2011-03-01 14:17:23

CSS可以通過使用bottom:0; position:fixed;來完成一些操作，但IE6和7可能不支持這個功能。我建議您使用CSS方法與jQuery解決方案配合使用，這樣您的所有用戶都將擁有相似的體驗。

來源

2011-03-01 13:50:35 Seth

它沒有幫助。我需要一個粘性的頁腳行爲，而不是一個固定的行爲。 – linkyndy 2011-03-01 17:21:19

我想我不明白區別？你能給個例子嗎？ – Seth 2011-03-01 17:52:10

我編輯了我的答案。我希望頁腳根據內容動態定位，類似於粘性頁腳。 – linkyndy 2011-03-01 22:35:33

CSS動態定位頁腳（粘性頁腳問題）

回答

相關問題