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”的顶部覆盖“固定”DIV，“content-wrapper”的底部变为透明，显示“固定”DIV。

我能够通过在CSS中赋予“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;
}

修复了DIV未涵盖的DIV

1 个答案: