固定宽度 div 在调整浏览器窗口大小时丢失其背景颜色

问题描述 投票：0回答：3

我正在创建一个基于960网格系统的博客。它具有三个简单的 div：

  1. header 2. Content 3. Footer，每个都有一个固定宽度的 div，可容纳 2-3 列文本。内容 div 和其中的固定宽度 div 具有相同的背景颜色，但是当我减小浏览器窗口的大小时，由于某种原因它会忽略内容 div 的颜色并显示 html 主体的颜色。

这是发生这种情况的另一个网站的示例：http://encourageothers.com/ ...将浏览器的大小减小到小于 900 px 左右，然后水平滚动到右侧...你会明白我的意思的。

请帮助我！ ...这让我发疯！！

html css resize background-color
3个回答
5
投票

jake 对于与浏览器视口相关的 100% 宽度绝对正确。

不要添加额外的最大宽度，而是向显示调整大小问题的 div 添加额外的最小宽度。如果滚动条出现之前的最小宽度是 1200px - 只需给相关 div 的最小宽度为 1200px 即可。

1
投票

找到解决方案了！ ...只需设置一个以像素为单位的最大宽度，并在您看到此问题的任何地方设置一个 100% 的宽度。对我有用。

0
投票

我也遇到这个问题了

在 div 容器上设置宽度（以像素为单位）可能会导致溢出问题。如果您使用 rem 或 em，情况也是如此。我不想使用这个解决方案。

另一个解决方案是设置display:inline-block;在 div 容器上。

您可能需要在自己的开发工具中尝试下面的代码片段。它可能无法在 Stackoverflow 上运行。

body {
    background-color: gray;
    white-space: nowrap;
}
.container {
    background-color: red;
    display:inline-block;
    white-space: nowrap;
}
<body>
    body-body-body-body-body-body-body-body-body-body-body-body-body-body-body-body-body
    <div class="container">
       div-div-div-div-div-div-div-div-div-div-div-div-div-div-div-div-div-div-div-div-div-div-div-div
    </div>

</body>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.