絕對定位的div浮在主要內容

我完全在瀏覽器窗口的底部放置一個頁腳，使用下面的代碼：絕對定位的div浮在主要內容

HTML

<html> 
    <body> 
     <div id="content"> 
      Content 
     </div> 
     <div id="footer"> 
      Footer 
     </div> 
    </body> 
</html>

CSS

#content { 
    margin-bottom: 20px; 
    background: red; 
} 

#footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 20px; 
    background: blue; 
}

這種方式和預期的一樣，但是當我使瀏覽器窗口變小時，真正涵蓋主要內容。什麼是防止這種情況的最有效方法？

在此先感謝。

來源

2011-12-05 Jonathan

爲什麼你必須使用絕對定位你的頁腳？ – mc10

@ mc10我使用絕對定位，因爲我想讓頁腳「粘」到瀏覽器窗口的底部。 – Jonathan

如何在'＃content'中添加一個'z-index'？ – mc10

你可能想使用粘滯頁腳：http://www.cssstickyfooter.com/

來源

2011-12-05 03:17:21

試試這個：

#content { 
    padding-bottom: 20px; 
    background: red; 
} 

#footer { 
    position:fixed; //Changed to fixed 
    bottom:0px; 
    width:100%; 
    height: 20px; 
}

來源

2011-12-05 03:06:15 Jon

謝謝@Jon。我不能但得到這個工作：http://jsfiddle.net/2Afs6/ – Jonathan

你需要一個Sticky Footer。

Demo

這裏是another example使用僞元素。您可能會遇到舊版IE的一些問題，但它允許您放棄非語義元素。

來源

2011-12-05 03:18:32 bookcasey

絕對定位的div浮在主要內容

回答

相關問題