Css 100%宽度的bg图像不在水平滚动上延伸

我注意到了这个问题。我做了一个快速的屏幕截图来演示：

<div id="content-wrapper">
  <div id="content">
  </div>
</div>

<div id="footer-wrapper">
  <div id="footer">
  </div>
</div>

</div>
</body>

基本上，当设置了“最小宽度”且视口处于该约束下时，会出现一个水平滚动条。这与您所期望的差不多，但是当您水平滚动时，所有假定扩展到整个页面宽度并且具有与正文不同的背景图像/颜色的元素都不会扩展。如果调整视口的大小，它似乎会跟上

<div id="content-wrapper">
  <div id="content">
  </div>
</div>

<div id="footer-wrapper">
  <div id="footer">
  </div>
</div>

</div>
</body>

这是一个已知的问题吗？例如，你可以在很多网站上看到它

<div id="content-wrapper">
  <div id="content">
  </div>
</div>

<div id="footer-wrapper">
  <div id="footer">
  </div>
</div>

</div>
</body>

---

有什么想法吗？

在没有看到任何相关代码的情况下，我只能假设需要做什么

<div id="content-wrapper">
  <div id="content">
  </div>
</div>

<div id="footer-wrapper">
  <div id="footer">
  </div>
</div>

</div>
</body>

我通常会进行可伸缩设计，以下是我如何解决您的问题：

<div id="content-wrapper">
  <div id="content">
  </div>
</div>

<div id="footer-wrapper">
  <div id="footer">
  </div>
</div>

</div>
</body>

下面是我通常如何设置带有背景颜色的页面，例如视频中显示的内容

<div id="content-wrapper">
  <div id="content">
  </div>
</div>

<div id="footer-wrapper">
  <div id="footer">
  </div>
</div>

</div>
</body>

HTML:

<div id="content-wrapper">
  <div id="content">
  </div>
</div>

<div id="footer-wrapper">
  <div id="footer">
  </div>
</div>

</div>
</body>

同样的概念也可以应用于背景图像，但为了保持适当的效果（除非是可以重复的图案），您需要有一个非常宽的图像或至少一个渐变为某种背景颜色的图像。你要做的是将图像作为背景图像，然后简单地将其定位为中间顶部，它将随着页面展开

<div id="content-wrapper">
  <div id="content">
  </div>
</div>

<div id="footer-wrapper">
  <div id="footer">
  </div>
</div>

</div>
</body>

---

希望这能有所帮助。

我在gowalla和stackoverflow（发生在页脚上）上通过向body元素添加一个min width解决了这个问题。不过，我认为在您自己的站点上，最好将其应用于包含页面所有内容（包括页脚）的包装器div

<div id="content-wrapper">
  <div id="content">
  </div>
</div>

<div id="footer-wrapper">
  <div id="footer">
  </div>
</div>

</div>
</body>

您需要将其值设置为内容的最小固定宽度，因此如果您的主内容div设置为960px宽，那么这可能就是您想要的（但您可能需要调整以考虑额外的边距/边框等）

<div id="content-wrapper">
  <div id="content">
  </div>
</div>

<div id="footer-wrapper">
  <div id="footer">
  </div>
</div>

</div>
</body>

---

这里有一个例子：

我想你说的是一个问题，100%的宽度等于视口的宽度，而不是内容的宽度。要使背景变为内容的宽度，你应该在背景div中添加最小宽度，例如：

<div id="content-wrapper">
  <div id="content">
  </div>
</div>

<div id="footer-wrapper">
  <div id="footer">
  </div>
</div>

</div>
</body>

.background
{
    width:100%;
    min-width:960px; /* The width of the content */
    background:url(your-pretty-background.png);
}

.content
{
    width:960px;
}

---

它起作用了

将内容宽度更改为2000px而不是滚动，然后看看会发生什么：滚动区域中不再有背景，甚至在stackoverflow（页脚上），页面可能比需要的宽得多

<div id="content-wrapper">
  <div id="content">
  </div>
</div>

<div id="footer-wrapper">
  <div id="footer">
  </div>
</div>

</div>
</body>