0

我有这个问题不允许我绝对定位页脚。我放置它,它在 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;}
4

3 回答 3

2

你想把页脚放在……什么?我猜“在绝对底部<div id="wrapper">”?然后你需要制作你的包装器position: relative;或者position: absolute;. 绝对定位的元素将自己定位在最近relative的具有fixedabsolute位置的父元素上。从您的 CSS 来看,这似乎只是<html>or <body>

此外,您的元素info-footerfooter元素都将位于彼此叠放的最底层。这是想要的效果吗?

也许您可以发布您希望它看起来像什么的模型,以及它现在的样子?

真的有必要这样做,而不是让内容“自然地”向下推页脚吗?

编辑:不确定我是否理解正确,但是简单repeating的背景图像<body>呢?

body { background: url(image.jpg) repeat-x center bottom; }
于 2009-07-06T04:24:02.343 回答
0

作为对编辑 2 的回应:position:absolute将元素从文档流中取出,因此它们的高度不会被强制施加在它们的父级上(或者,父级不会增长以适应它们)。这就是为什么增加高度会起作用的原因;但是,如果你的绝对定位元素最终比你设置的高度高,同样的事情也会发生。

在上面,看起来div#info-design根本不需要绝对定位(据我所知)。您可以删除该声明,将其赋予margin-bottom等于 的高度div#footer并达到相同的效果,而无需依赖于在 . 上设置任意高度div#wrapper

于 2009-07-07T14:19:44.930 回答
0

是否将 margin-bottom: 50px 添加到您的#wrapper 工作?

于 2009-07-07T14:28:04.110 回答