修复了以下 DIV 未涵盖的 DIV

Question

我的页面顶部有一个“固定”DIV：

<div id="banner-wrapper">
    <div id="banner"></div>
</div>

使用以下 CSS：

#banner-wrapper {
width:300px;
height:500px;
}
#banner {
width:300px;
height:500px;
position:fixed;
top:0;
left:0;
background:orange;
}

这个“固定”DIV 后面跟着一个“内容包装”DIV：

<div id="content-wrapper">
    <div id="content-left">
     content left
    </div>
    <div id="content-right">
     content right or sidebar
    </div>
</div>

使用以下 CSS：

#content-wrapper {
width:300px;
background:red;
position:absolute;
top:500px;
bottom:0;
}
#content-left {
width:150px;
float:left;
}
#content-right {
width:150px;
float:right;
}

我遇到的问题是“内容包装器”DIV 没有完全覆盖“固定”DIV。 “content-wrapper”的顶部覆盖了“fixed”DIV，“content-wrapper”的底部变为透明，显示下方的“fixed”DIV。

我可以通过在 CSS 中给“body”一个高度来解决这个问题。但是，我不想给“body”一个高度，因为我不知道内容的真正高度，并希望它保持灵活。我也试过插入

<div style="clear:both;"></div>

在结束标记之前，但它不会强制“内容包装器”向下。

这是关于 JSFiddle 问题的example。

如您所见，“红色”框不会到达“蓝色”框，即使它设置为绝对值，底部 0。据我所知，如果它不包含任何 DIV，它会到达底部它。但是一旦我添加了“content-x”DIV，它就不再到达页面底部。

感谢您的帮助。

Answer 1

您可以相对定位元素#content-wrapper，而不是绝对定位它。然后你可以省略top/bottom 定位，它会按预期运行。

它首先不起作用的原因是因为您为绝对定位的元素提供了100% 的高度。因此它将与窗口具有相同的高度，这不是您想要的。

Updated Example

更改以下内容：

#content-wrapper {
    width: 300px;
    height: 100%;
    background: red;
    position: absolute;
    top: 500px;
    bottom: 0;
}

到：

#content-wrapper {
    width: 300px;
    background: red;
    position: relative;
}