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

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 {
          min-width: 1000px;
         }