与相对和绝对定位有关的Div定位问题

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 ，以使内容不会padding-bottom 。

Answer 2

取出高度： pageContainer上的100％ -将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上进行了测试。