为什么 chrome 不接受底部：0；作为绝对定位页脚的值？

Question

实际上不确定这只是一个 chrome 问题，但我已经将整个页面设置为在相对位置的容器中使用绝对定位的元素。通常，我不会这样做，但我们需要旋转图像，所以我们不能使用 css 背景属性。

无论如何，由于某种原因，当我将页脚绝对定位为底部位置时：0;右：0；它没有显示出来。

HTML：

<div id="wrapper">
  <div id="content">
  </div>
  <div id="footer">
    <ul>
    </ul>
  </div>
</div>

CSS：

#wrapper {
  position: relative;
  margin: 0 auto;
  width: 940px;
}

#content {
  position: absolute;
  top: 0;
  left: 0;
  height: 350px;
}

#footer {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 10;
}

编辑：我们无法设置包装器的高度，因为这将是一个 wordpress 网站，用户可以输入大量文本。但是，我们可以设置页脚的高度。

Answer 1

如果您无法设置高度，则只需从包装器中删除页脚，使其没有父级。绝对定位高度由其父级确定。你的父母“包装器”没有高度；因此，它不会浮到底部。

幸好身体会掉到底部。

这是jsFiddles中的代码

        #wrapper {
      position: relative;
      margin: 0 auto;
      width: 940px;

    }

    #content {
          background:#ccc; 
      position: absolute;
      top: 0;
      left: 0;
      height: 350px;

    }

    #footer {
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: 10;
        background:papayawhip;
    }​



    <div id="wrapper">
  <div id="content">
      sdfasdf
  </div>

</div>
 <div id="footer">
    <ul>
        <li>aslfaskdjf</li>
    </ul>
  </div>
​

Answer 2

#wrapper 的高度是0px，所以#footer 确实出现了 - 但它的0px 高度......see here 你会注意到#footer 是右侧的红色边框

如果您给#wrapper 一个高度并将高度应用于#footer you can see it 或使页脚与其内容的高度相同remove its height property

Answer 3

实际上它上面的代码是正确的，但是你的#wrapper 有相对位置，而你的#footer 在#wrapper 中。 #footer 的位置根据 wrapper 对齐。如果给 wrapper 指定高度，您可以看到它；见下文；

HTML：

<div id="wrapper">
  <div id="content">
  </div>
  <div id="footer">
    <ul>
your_content
    </ul>
  </div>
</div>

CSS：

#wrapper {
  position: relative;
  margin: 0 auto;
  height: 200px;
  width: 940px;
}

#content {
  position: absolute;
  top: 0;
  left: 0;
  height: 350px;
}

#footer {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 10;
}

您可以在这里查看示例http://jsfiddle.net/8DZ5R/

解决此问题的另一种方法，只需将“#footer”位置“绝对”更改为“静态”。您不需要更改包装高度：您可以在此处查看http://jsfiddle.net/8DZ5R/1/