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

我遇到的问题与我绝对位于页面底部的页脚有关。一切都很好，直到页面上的副本开始向下延伸，然后导致我的内容井向下延伸到页脚后面。我是否可以强制我的内容井将页脚“推”到页面下方

以下是相关的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>

---

感谢您可能提供的任何帮助

使用

位置：固定

对于页脚，您可能还希望为

正文
添加一些
填充底部
，这样内容就不会进入页脚下方。
取出高度：100%在页面容器上-这将div固定为窗口高度而不是内容高度。
尝试以下操作：

<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，正文{边距：0；填充：0；高度：100%；}
#页码容器{宽度：743px；边距：0自动；}
#标题{高度：87px；边框：1px实心#000；}
#页脚{高度：133px；位置：绝对；底部：0；宽度：100%；边框：1px实心#000；}
#导航{高度：29px；边框：1px实心#000；}
#左列{宽度：230px；浮点：左；边框：1px实心#000；}
#右_列{宽度：490px；浮点：左；边框：1px实心#000；}
#页面{最小高度：100%；位置：相对；}
#主内容{填充底部：133px；}
.clear{clear:两者；}

HTML（注意-必须将#页脚放在#页面内才能使用此方法）：


啊
导航
微光
存款准备金率
fffff

您可以在此处预览工作示例：

在Chrome、Firefox、IE6、IE7、IE8和Opera上测试。
嘿，史蒂夫。谢谢你的回复，但似乎没有效果。当我缩小浏览器窗口以便文本向下展开页面时，内容仍然在页脚后面。你对高度：自动部分做了什么吗？我也不认为这会有什么好处。谢谢雷科，但这并没有改变页脚的行为。我的主要内容仍然落后于页脚。太棒了！但有一个问题：如何添加上边距，使页面不会靠在浏览器窗口的顶部，而不会出现滚动条？将边距添加到任何容器（页面、页面容器、标题）会导致出现滚动条。谢谢
<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]--> 

<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>