Question

在我的绝对<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>

欢迎任何建议！

Answer 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;}

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

Answer 2

取而代之的是拥有绝对DIV并为背景设置其位置。将它作为相对div并设置背景图像会更好。你可以使用CSS background-position和margin：0 auto来浮动它的中心。这样，页脚div将始终位于下方。

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

Answer 3

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

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

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

#footer{position:fixed;bottom:0px;width:100%;....}

在Absolute div之后调整Div

3 个答案: