Question

我有这个问题，不允许我绝对定位页脚。我放置它，它在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;但它不会留在那里= /我错过了什么或添加了一些我不应该拥有的东西吗？

修改

我基本上想让页脚位于“content”div的最底层，但它不能放在那个div中，因为它是一个固定的宽度，我希望这个图像重复-x到整个浏览器（因此它被放置在内容之后和宽度=“100％”的包装之前;我已经尝试使包装器的位置绝对和相对，但它仍然不会将自己置于最底层...而且我已经尝试过它“自然地”，但它不会......

以下是它的样子（在Chrome中看起来像）： alt text

然后是IE和Firefox：

alt text

修改2

我发现了这个问题，由于某些原因，我的#wrapper没有扩展到覆盖整个浏览器的高度但只有一小部分，有人知道我错过了什么吗？我补充说：

#wrapper{font-size:1.2em;font-family:Helvetica, Arial, sans-serif;width:100%;min-height:100%;}

#content{margin:0 auto;width:1000px;}

Answer 1

你想要将页脚放在......什么？我想“在<div id="wrapper">的绝对底部”？然后，您需要使您的包装器position: relative;或position: absolute;。具有relative，fixed或absolute位置的绝对定位元素orient themselves on the closest parent。从您的CSS看起来只是<html>或<body>。

此外，您的info-footer和footer元素都会位于彼此顶部的最底层。这是期望的效果吗？

也许你可以发布一个你希望它看起来像什么的样机，以及它现在的样子？

是否真的有必要这样做，而不是仅仅让内容“自然地”向下推？

编辑：不确定我是否理解正确，但仅仅repeating <body>底部的背景图片呢？

body { background: url(image.jpg) repeat-x center bottom; }

Answer 2

作为对编辑2的回应：position:absolute将元素从文档流中取出，因此它们的高度不会在其父级上强制执行（或者，父级不会增长以容纳它们）。这就是为什么增加高度会起作用的原因;但是，如果你绝对定位的元素高于你设置的高度，那么同样的事情也会发生。

在上面，看起来div#info-design根本不需要完全定位（从我能说的）。你可以删除该声明，给它margin-bottom等于div#footer的高度并获得相同的效果，而不依赖于在div#wrapper上设置任意高度。

Answer 3

添加margin-bottom：50px到你的#wrapper工作吗？

定位问题

3 个答案: