Question

任何人都可以告诉我为什么以下测试用例会发生以下情况？

<!DOCTYPE html>
<html>
    <head>
        <style>
        body {
            background-color: #ffffff;
            margin: 0; 
            padding: 0;
        }
        .section {
            background-color: #000000;
            color: #ffffff;
        }

        .wrap {
            width: 960px;
            margin: 0 auto;
        }
        </style>
    </head>
    <body>

        <div class="section">
            <div class="wrap">Some content here</div>
        </div>

    </body>
</html>

当窗口足够大以容纳960px时，一切都按预期工作。

当窗口调整为小于960px时，会出现水平滚动条（正如预期的那样）。但是，当水平滚动时，似乎.section div没有在文档上拉伸，只显示窗口的宽度，因此显示了正文的白色背景。

我通常希望黑色，.section div在文档中展开，因为它显示为：默认为阻止。

有谁知道为什么会这样，更重要的是，如何得到我期望的结果？

干杯

Answer 1

这是因为你的部分只有它的内容大小。在这种情况下，这意味着您的包装器设置为960px。以百分比设置该部分仅作为可用屏幕的百分比，因此宽度：100％不会解决此问题。您应该将节宽度设置为特定数字，这样可以解决问题。

编辑：使用最小宽度而不是宽度，当你比最小宽度更大时，它的效果会更好。

Answer 2

部分正在调整其内容，尝试在.section

上设置宽度：100％

此外，您可能希望将其添加到.wrap

保证金左：汽车; 余量右：汽车;

将以包裹div为中心

CSS背景和水平滚动条

2 个答案: