粘性頁腳：爲什麼會溢出：auto;和位置：相對;被需要？

Question

我使用CSS粘的頁腳從http://www.cssstickyfooter.com/

爲什麼我們需要：#main{overflow:auto;}和#footer{position: relative;}？

似乎它的工作沒有它（我不是在談論Opera和IE修復）。

Answer 1

overflow:auto;會簡單地添加滾動條如果頁面比可以根據您的屏幕高度顯示更長的時間。我以前使用過它，並且相信它可以確保頁面滾動時頁腳底部保持您的頁腳可見。

您是否在比屏幕長的頁面上嘗試過它，看看它是如何工作的？從cssstickyfooter.com

報價：

無需Clearfix哈克！

許多CSS設計人員都會熟悉Clearfix Hack。它解決了很多與浮動元素有關的問題 。此版本的 粘滯頁腳解決方案使用它。相反，更現代和更容易的代碼解決方案是溢出語句。我們將其應用於主要的 ，以幫助您將頁腳粘貼到Chrome中。它還解決了使用2列布局時出現的問題，其中您將內容浮動到一邊爲 ，另一邊爲您的邊欄。主內部的浮動內容元素 可能導致頁腳在某些 瀏覽器中未被卡住。

Answer 2

你可能不需要它，但如果需要的話overflow:auto使一個元素作爲一個容器來擴展自己以包含它的浮動元素（如果存在的話）。

如果你使用螢火蟲，你可以看到我的意思是使用它溢出並點擊容器element#main。它將延伸到包含元素。

沒有它，容器元素保持儘可能小，不「包含」其他元素。

更多在這裏閱讀：

http://www.quirksmode.org/css/clearing.html