超出水平滚动范围的区域设置为正文颜色

Question

我是HTML / CSS的新手。我希望屏幕的水平条纹是黑色的，在红色背景上。使用CSS，我定义了一个黑色背景的包装器和一个红色背景的主体。

不幸的是，当有一个水平滚动条时，包装器只占用页面的一部分，可以通过最左侧的滚动条看到该部分。右边页面的区域全是红色。

以下是相关的HTML和CSS：

<div id="wrapper">
    <div id="page" class="container">
        <div id="content">
            <h2 class="title">Foo</h2>
            <div class="Body">
                <p>Bar</p>
            </div>
        </div>
     </div>
</div>



#wrapper {
    background-color: #000000;
}

.container {
    width: 1000px;
    margin: 0px auto;
}

#page {
    padding-top: 280px;
}

#content {
    float: left;
    width: 620px;
    padding-right: 40px;
}

body {
    margin: 0;
    background: #FF0000;
}

Answer 1

你需要指定div #wrapper

的最小宽度

#wrapper {
          min-width: 1000px;
         }