Question

以下是整页：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
    <style>
        body {margin: 0; background: yellow;}

        .bar {width: 100%; background: pink;}

        .content {width: 800px; margin: 0 auto;}
    </style>
</head>

<body>
    <div class="bar">
        <div class="content">
            This is content~
        </div>
    </div>
</body>
</html>

我的意图是在浏览器显示的整个水平长度上填充粉红色条。当所述窗口宽于800像素时，条形内容保持居中，或者当较窄时，条形内容保持固定且水平可滚动。但是，当浏览器变窄时，如果向右滚动，粉红色条不会到达右端;在这种情况下，可以看到身体的黄色。

在最新的Firefox，Chrome和IE8中看到此问题。

Answer 1

你应该制作内容粉红色的背景

.content {width: 800px; margin: 0 auto;background: pink;}

或

将条的最小宽度设为内容宽度。

.bar {width: 100%;min-width:800px;background: pink;}

Answer 2

最好的方法是将min-width设置为等于内容宽度。

如果您正在尝试建立iphone＆amp;网站也可以使用平板电脑，然后分别为每个视口定义宽度。

浏览器窗口变窄时如何保持背景颜色宽度

2 个答案: