100%宽度的背景图片在水平滚动时无法延伸

Question

我注意到这个问题。我做了一个快速屏幕截图来演示：http://dl.dropbox.com/u/904456/2010-06-14_2323.swf 基本上，当你设置了最小宽度并且视口窗口小于此限制时，会出现水平滚动条。这很符合预期，但是当您水平滚动时，所有应该扩展到整个页面宽度且具有与body不同的背景图像或颜色的元素都不会扩展。如果调整视口大小，则似乎会恢复正常。

这是已知的问题吗？可以在很多网站上看到，例如： http://gowalla.com。

有什么想法吗？

- Fuego DeBassi

---

哇，甚至在 Stack Overflow 上（在页脚处）！ - jackocnr

Answer 1

我曾经在gowalla和stackoverflow上解决了这个问题（它发生在页脚），方法是为body元素添加一个最小宽度。然而，在您自己的网站上，最好将其应用于包含所有页面内容（包括页脚）的包装器div。

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

这里有一个例子：http://jsfiddle.net/qUyp2/

- jackocnr

Answer 2

我认为你在谈论的是一个问题，即100％宽度等于视口的宽度而不是内容的宽度，如果要使背景覆盖内容的宽度，您应该向背景div添加min-width属性，例如：

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

.content
{
    width:960px;
}

它有效！

- webjsubash

Answer 3

没有看到任何相关代码，我只能根据需要做出假设。

通常我会设计可扩展的方案，以下是我解决您问题的方法：

这是我通常设置带有背景颜色的页面的方式，就像视频中展示的那样。

HTML:

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

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

</div>
</body>

CSS：

body { width: 100% }
#main-wrapper { width: 100%; background-color: #000 }
#header-wrapper { width: 100%; background-color: #111 }
#header { width: 200px; margin: 0 auto }
#content-wrapper { width: 100%; background-color: #222 }
#content { width: 200px; margin: 0 auto }
#footer-wrapper { width: 100%; background-color: #333 }
#footer { width: 200px; margin: 0 auto }

相同的概念也可以应用于背景图片，但为了保持适当的效果（除非它是可以重复的图案），您需要拥有一个非常宽的图像或至少一个淡化到某个背景颜色的图像。您要做的就是将图像放置为背景图像，然后将其简单地定位为中心顶部，它将随着页面扩展。

希望这可以帮助您。

- David

Answer 4

将内容的宽度更改为2000像素，然后滚动并观察发生了什么：滚动区域中不再有背景。

- Thomas

---

也许比必要的页面宽得多。 - IcedDante