與相對和絕對定位有關的分區定位問題

Question

我遇到的問題與我已絕對定位在頁面底部的頁腳有關。一切都很好，直到頁面上的副本開始向下延伸到頁面，然後導致我的內容井向下，向後延伸，頁腳。無論如何，我可以強制我的內容井將頁腳「推」下頁面？

下面是相關的html：

<div id="page"> 
     <div id="page_container"> 
     <div id="header"></div> 
     <div id="nav"></div> 
     <div id="main_content"> 
       <div id="left_column"></div> 
       <div id="right_column"></div> 
     </div> 
     </div> 
    </div> 
    <div id="footer"> 
    <div id="footer_container"> 
    </div> 
    </div> 

和有關CSS

#page   {width:100%;margin:0 0 10px 0; text-align:center;} 
#page_container {width:743px;height:auto !important;height:100%;margin:0 auto;min-height:100%;text-align:center;overflow:hidden;border:2px solid #000;} 
#header   {width:100%;background:url('../images/header.jpg');height:87px;clear:both; margin-top: -2px;} 
#nav    {width:100%;height:29px;float:left; text-align:left; border-bottom: solid 2px #000; border-top: solid 2px #000;} 
#main_content {width:100%;float:left; text-align:left; background-color:#fff; border-bottom: solid 2px #000; border-left: solid 2px #000; border-right: solid 2px #000;} 
#footer   {width:100%; position:absolute;margin-top:10px; bottom: 0; background:url('../images/footer_bg.jpg');height:133px;text-align:center;} 
#footer_container{width:746px;height:133px; text-align:left; display:inline-block;} 
#left_column  {width:230px; float:left; text-align:left; background-color:#fff; margin-top:5px;} 
#right_column {width:490px; float:right; text-align:left; background-color:#fff;margin-top:5px; padding:10px;} 

謝謝你也許可以給任何幫助！

Answer 1

使用position: fixed;爲頁腳，您也可能想要爲您的body有一些padding-bottom，以便內容不會根據它。

Answer 2

取出高度：100％ on pageContainer - 將div固定爲窗口高度，而不是內容高度。

Answer 3

試試這個：

<style type="text/css"> 
html, body { margin:0; padding:0; height:100%; }  
#page_container { width:743px; margin:0 auto; } 
#header { height:87px; border:1px solid #000; } 
#footer { height:133px; position:absolute; bottom:0; width:100%; border:1px solid #000;} 
#nav { height:29px; border:1px solid #000;} 
#left_column { width:230px; float:left; border:1px solid #000;} 
#right_column { width:490px; float:left; border:1px solid #000;} 

#page { min-height:100%; position:relative; } 
#main_content { padding-bottom:133px; } 
.clear { clear:both; } 
</style> 
<!--[if lt IE 7]> 
<style media="screen" type="text/css"> 
#container { 
    height:100%; 
} 
</style> 
<![endif]--> 

HTML（注意 - 你必須把#footer的內部#page這種方法工作）：

<div id="page"> 
    <div id="page_container"> 
     <div id="header">hhhh</div> 
     <div id="nav">nav</div> 
     <div id="main_content"> 
      <div id="left_column">lll</div> 
      <div id="right_column">rrr</div> 
      <div class="clear"></div> 
     </div> 
    </div> 
    <div id="footer"> 
     <div id="footer_container">fffff</div> 
    </div>  
</div> 

您可以預覽在這裏工作的例子：http://www.front-end-developer.net/examples/bottomfooter/footer.htm

經過Chrome，Firefox，IE6，IE7，IE8和Opera測試。