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

2023年9月3日 261次阅读

这是整个页面：

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

最佳答案 你应该让内容粉红色的背景

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

要么

使条的最小宽度为内容宽度.

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