定位问题

我有这个问题，不允许我绝对定位页脚。我把它和它与像5px的保证金大量保证金的出现在IE在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” 出现只是底部：0像素;但它不会留在那里= /我错过了什么或添加了一些我不应该有的东西？

编辑

我基本上希望让页脚是在“内容”最底层的div，但它不能被放置在该专区内，因为它是一个固定的宽度，我想这图像去重复x到整个浏览器（因此它被放置在内容之后，宽度=“100％”的包装器之前;我试图使包装的位置是绝对的和相对的，但它仍然不会把它放在最底部...我已经试过它被“自然地”推下来，但它不会...

下面是它的方法HOULD样子（看起来像在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;}

来源

2009-07-06 Tsundoku

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

此外，无论您info-footer和footer元素会被放置在最底层铺在彼此的顶部。这是期望的效果吗？

也许你可以发布你想要它的样子，看起来像什么样子？

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

编辑：不知道如果我理解正确的话，但对于简单repeating沿<body>底部的背景图片？

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

来源

2009-07-06 04:24:02 deceze

响应于编辑2：position:absolute取元素出文档流动的，从而它们的高度将不会在他们的父母来实施（或，父不会增长以容纳它们）。这就是为什么增加高度会起作用的原因。但是，如果你绝对定位的元素比你设置的高度高，那么同样的事情会发生。

在上面，它看起来像div#info-design并不需要在所有绝对定位（从我可以告诉）。你可以删除该声明，给它一个margin-bottom等于div#footer的高度，并达到相同的效果，而不依赖于设置div#wrapper上的任意高度。

来源

2009-07-07 14:19:44 ajm

是否加边距：50像素您#wrapper指定的工作？

来源

2009-07-07 14:28:04 sakabako

回答

相关问题