4

这是整个页面：

<!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 中看到了这个问题。

4

2 回答 2

2

您应该将内容的背景设为粉红色

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

或者

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

.bar {width: 100%;min-width:800px;background: pink;}
于 2012-06-19T13:19:25.690 回答
0

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

如果您也尝试为 iphone 和平板电脑制作网站，那么您可以分别为每个视口定义宽度。

于 2012-06-19T13:33:47.933 回答