Question

我有以下代码：

HTML

<div class="container">
    <div class="fixed-area">
    <div class="content"></div>
    </div>
</div>

CSS

html, body {
    height: 100%;
    margin: 0;
}
html, body, body * {
    z-index: 3;
}
div.container {
    height: 100%;
    position: relative;
    background-color: #000000;
    z-index: 1;
}
div.fixed-area {
    position: relative;
    width: 960px;
    height: 100%;
    margin: 0 auto;
    background-color: #ffff00;
}
div.content {
    position: relative;
    width: 600px;
    height: 1500px;
    margin: 0 auto;
    background-color: #ff0000;
}

容器（黑色）和固定区域（黄色）div不会与内容div（红色）一起展开以覆盖可滚动区域。当滚动条用于查看内容的底部时，白色背景代替容器和固定区域div。 即使向下滚动，如何使容器和固定区域div扩展以覆盖内容的所有背景？

Answer 1

将容器高度更改为auto

Answer 2

将容器更改为此CSS

div.container {
height: auto;
position: relative;
background-color: #000000;
z-index: 1;
}

您必须将容器的高度更改为auto;

Answer 3

如果.container的最小高度为100％，但应与.fixed-area容器一起增长，请使用：

height: auto;
min-height: 100%;

请参阅：http://jsfiddle.net/gopeter/B2Ljt/4/（显示min-height的工作原理）和http://jsfiddle.net/gopeter/B2Ljt/3/（显示.container与.fixed-area一起增长的方式）

Answer 4

您将容器的高度设为100％，这是您不想要的。只需删除此样式。

JSFiddle demo

背景不包括可滚动区域

4 个答案: