Css 如何保持背景色'；浏览器窗口变窄时的宽度_Css_Background Color

Css 如何保持背景色'；浏览器窗口变窄时的宽度

css

Css 如何保持背景色'；浏览器窗口变窄时的宽度,css,background-color,Css,Background Color,以下是整页： <!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%; backgrou

以下是整页：

<!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>


正文{边距：0；背景：黄色；}
.bar{宽度：100%；背景：粉红色；}
.content{宽度：800px；边距：0自动；}
这就是内容~

我的目的是让一个粉色条填充浏览器显示的整个水平长度。当所述窗口宽度超过800像素时，该条的内容保持居中，或者当窗口较窄时，该条的内容保持固定且水平滚动。但是，当浏览器变窄时，如果向右滚动，粉色条不会到达右端；在这种情况下，身体的黄色会显示出来

在最新的Firefox、Chrome和IE8中看到了这个问题。

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

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

或

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

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

最好将

min width

设置为内容宽度

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

如果您也在尝试为iphone和平板电脑创建网站，那么您可以分别为每个视图端口定义宽度

最小宽度的解决方案似乎工作得很好（即使在干燥的环境下），特别是因为它允许内容部分具有不同的bg颜色。刚才注意到，在“窄浏览器，向右滚动”的情况下检查元素时：body元素似乎也没有到达最右边的边界。显然它也需要最小宽度的东西。