1

在 absolute 之后调整页脚时出现问题<div>。这是场景：

我有一个<div>包含背景图像 - 这<div>是绝对的 我将所有内容都放在另一个<div>位于图像本身上的内容我的页脚应该“浮动”在图像下方，但这不会发生。

现场预览

如您所见，页脚在图像上，无论图像的高度如何，它都应该在它的下方。

我的标记将是这样的：

<div id="banner"><img src="#" /> Position Absolute</div>
<div id="container">
   Content goes in here
</div>
<div id="footer">
   This footer should always be under the banner
</div>

欢迎任何建议！

4

3 回答 3

1

你试过这个方法吗

    <div id="banner">Position Absolute</div>
          <div id="container">
                   Content goes in here
          </div>
    <div class="clear"></div>
          <div id="footer">
                   This footer should always be under the banner
          </div>


    .clear{ clear:both}
      #footer{ position:absolute; bottom:0;}

注意：我已经更新了将页脚保持在底部的答案。

于 2012-12-10T10:52:41.340 回答
0

而是拥有一个绝对 DIV 并将其位置设置为背景。最好将其作为相对 div 并设置背景图像。您可以使用 CSS background-position 和 margin: 0 auto 使其居中浮动。这样，页脚 div 将始终位于下方。

相对 div 不考虑绝对 div 定位。

于 2012-12-10T10:53:28.550 回答
0

我不确定我是否遇到了问题......但我猜你正在寻找“粘性页脚”。

问题是您的内容 div。您应该使您的内容 div 相对或浮动，然后您可以添加粘性页脚：

<div id="footer">Footer</div>

#footer{position:fixed;bottom:0px;width:100%;....}
于 2012-12-10T13:54:02.507 回答