Question

我有这个页面：

<html>
    <head>
        <title>Test</title>
    <style>
    html, body {
        width: 100%;
        padding:0;
        margin: 0;
    }
    .container {
        background-color:darkorange;
    }
    .content {
        width:960px;
        margin:0 auto;
    }
    </style>
    </head>
    <body>

    <div class="container">
        <div class="content">Some text</div>
    </div>

    </body>
</html>

在960px下调整浏览器大小。如果你滚动水平.container将在右边有一个空白区域，而不是一直到右边的黑暗。

当您在960px下调整浏览器大小并滚动水平时，如何使.container成为没有空白区域的暗区？

Answer 1

为容器提供最小宽度960px;

.container {
    min-width: 960px;
}

默认情况下，容器将是其容器（主体）的100％，即窗口的宽度。当窗口小于960px时，内容会溢出容器，因此您可以看到正文的背景颜色。

当内容大于容器时，容器右侧有空白区域

1 个答案: