粘性頁腳沖突CSS

Question

我正在嘗試使用粘性頁腳，但似乎與CSS沖突，我正在學習本教程，但是我想知道頁腳為什么在頁面中間，我該怎么做要解決這個問題。

我的代碼：

jsfiddle.net/q2Vuq/

Answer 1

之所以看到腳注腳出現這種奇怪的行為，是因為您使用了position:absolute; 在您的許多元素上。 也就是說，那些包裹在#navigation div中。

看一看 （這個JSFiddle只是更清楚地說明了問題）：

我給所有令人討厭的元素都提供了背景色（以及主體），因此您可以看到這些元素實際上導致滾動條超出了主體的高度。 絕對定位實際上將它們帶到了布局之外-這意味着它們不會導致其父#navigation擴展，這反過來也不會導致其父.page-wrap擴展，最終導致頁腳沒有向下移動。 頁腳被放置到主體的底部（由於粘性頁腳CSS），該高度還不夠低，因為絕對定位的元素在下方延伸得更遠（它們被主體忽略了）。

因此，考慮到這一點，您如何解決此問題？ 不幸的是，您的粘性頁腳在很大程度上取決於以下假設：所有內容都將被計入其上方的布局中，或者至少其上方的包裝元素將足夠高以說明其所有內容。 這使您難以使用絕對定位。

最好的解決方案可能是刪除文檔中當前絕對位置元素的用法，並重新設計元素的放置方式。 由於我不知道您真正針對的是什么設計，因此我無法提供一個示例。 另一種選擇是將內部包裝器元素放置在.page-wrap ，並設置min-height ，使其甚至低於最低的絕對位置元素。 但是，第二種方法不太靈活，我不推薦使用。

如果這不是您想要的，或者在此特定問題上需要更多幫助，請告訴我，我們將很樂意為您提供進一步的幫助。 祝好運！