html - 背景不覆盖可滚动区域

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

如果 .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 增长)