Html 固定DIV不包括在以下DIV中

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

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

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

我遇到的问题是，“内容包装器”DIV没有完全覆盖“固定”DIV。“内容包装器”的顶部覆盖“固定”DIV，“内容包装器”的底部变得透明，下面显示“固定”DIV

我能够通过在CSS中给“body”一个高度来解决这个问题。然而，我不想给“身体”一个高度，因为我不知道内容的真实高度，希望它保持灵活性。我也试过插入

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

但它不会强制“内容包装器”关闭

下面是关于JSFIDLE问题的一个示例

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

---

谢谢你的帮助

您可以相对定位元素

#内容包装器

，而不是绝对定位它。然后，您可以省略

顶部

/

底部

定位，它将按预期运行

它不起作用的原因首先是因为您将绝对定位元素的高度设置为

100%

。因此，它将具有与窗户相同的高度，这不是您想要的

更改以下内容：

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

致：

---

不清楚你想做什么。为什么任何东西都会“覆盖”一个固定的div？我在页面顶部有一个固定的横幅。下面的内容必须在固定div的顶部滚动，以便在滚动固定div时不会显示。谢谢Josh。这就成功了。一个小问题是，现在页面底部有一个小间隙。它看起来像是页脚下10像素的边距。不知道为什么会在那里。下面是一个@SomeDude示例，它来自

body

元素上默认的8px

边距。用
正文{margin:0；}
删除它。。更新的示例-我确实将body设置为零填充和边距。我会仔细检查的。您的JSFIDLE版本似乎没有这个差距，但我的版本有。我要比较一下，看看哪里出了错。谢谢你，乔希。你太棒了！
#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 style="clear:both;"></div>

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

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