html - CSS 背景和水平滚动条

谁能告诉我为什么这个测试用例会出现以下情况？

<!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 似乎没有在整个文档中拉伸(stretch)，看起来只是窗口的宽度，因此显示了正文的白色背景。

我通常希望黑色的 .section div 横跨整个文档，因为它默认显示为 block 。

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

干杯

最佳答案

这是因为您的部分的宽度仅与其中的内容一样大。在这种情况下，这意味着您的包装器设置为 960px。以百分比设置部分仅适用于可用屏幕的百分比，因此 width:100% 无法解决此问题。您应该将您的部分宽度设置为特定数字，这将解决问题。

编辑:使用 min-width 而不是 width，当你的宽度大于 min-width 时效果更好。

关于html - CSS 背景和水平滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22673844/