我有这个问题不允许我绝对定位页脚。我放置它,它在 IE 中以 5px 的边距出现,在 Firefox 和 Chrome 中完美显示......我真的不知道为什么会发生这种情况......这是 HTML:
<p>In posuere dapibus mauris, et elementum magna rhoncus quis. Morbi ultricies malesuada magna, vel porta risus rhoncus a. Morbi aliquam facilisis dolor, scelerisque porttitor dui auctor id.</p>
</div><!-- /info -->
</div><!-- /info-design -->
</div><!-- /content -->
<div id="info-footer"></div><!-- /info-footer -->
<div id="footer">
</div><!-- /footer -->
</div><!-- /wrapper -->
和CSS:
#wrapper{font-size:1.2em;font-family:Helvetica, Arial, sans-serif;width:100%;}
#content{margin:0 auto;width:1000px;}
#info-design{
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-opera-border-radius: 0 0 5px 5px;
-khtml-border-radius: 0 0 5px 5px;
filter:alpha(opacity=80);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
opacity: .8;
-moz-opacity: .8;
-khtml-opacity: .8;
background:#FFF;
border:1px double #000;
margin:0 0 10px 0;
position:absolute;
padding:10px 3px 3px 10px;
width:985px;
z-index:100;
}
#info{z-index:101;}
#info-footer{background:url(../img/BaseSite.gif) no-repeat center bottom;height:158px;position:absolute;bottom:0px;z-index:99;}
#footer{
background:url('../img/cesped.jpg') repeat-x center bottom;
height:176px;
position:absolute;
width:100%;
z-index:98;
bottom:0px;
}
我希望图像“cesped.jpg”出现在底部:0px;但它不会留在那里=/我错过了什么或添加了一些我不应该拥有的东西吗?
编辑
我基本上想让页脚位于“内容” div 的最底部,但它不能放在那个 div 中,因为它是固定宽度,我希望这个图像重复-x 到整个浏览器(因此它被放置在内容之后和宽度为“100%”的包装器之前;我尝试让包装器的位置绝对和相对,但它仍然不会将自己置于最底部......我已经尝试将它“自然地推下” “但它不会...
这是它的外观(在 Chrome 中看起来像):(来源:flickr.com)
然后是 IE 和 Firefox:
(来源:flickr.com)
(来源:flickr.com)
编辑 2
我发现了这个问题,由于某种原因,我的#wrapper 没有扩展到覆盖整个浏览器高度,而只是其中的一小部分,有人知道我错过了什么吗?我补充说:
#wrapper{font-size:1.2em;font-family:Helvetica, Arial, sans-serif;width:100%;min-height:100%;}
#content{margin:0 auto;width:1000px;}