2

实际上不确定这只是一个 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 网站，用户可以输入大量文本。但是，我们可以设置页脚的高度。

4

3 回答 3

3

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

幸好身体会沉到底部。

这是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>
​
于 2012-04-24T16:15:02.557 回答
2

的高度#wrapper确实显示出来了-但它的0px高度....看到这里你会注意到右边是一个红色边框#footer0px#footer

如果你给#wrapper一个高度并应用一个高度，#footer 你可以看到它，或者使页脚与其内容的高度相同，删除它的高度属性

于 2012-04-24T15:54:41.063 回答
1

实际上它上面的代码是正确的，但是你的#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/

于 2012-04-24T16:00:58.977 回答