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;作为页脚，您也可能希望为padding-bottom添加一些body，以便内容不会被置于其下。

Answer 2

取出pageContainer上的 height：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上进行测试。

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

3 个答案: