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

Question

我注意到这个问题.我做了一个快速的屏幕截图来演示:http: //dl.dropbox.com/u/904456/2010-06-14_2323.swf

基本上,如果设置了最小宽度并且视口位于该约束下,则会出现水平滚动条.几乎是你所期望的,但是当你水平滚动所有想要延伸到整个页面宽度并且具有与身体不同的背景图像/颜色的元素时,不会延伸.如果您调整视口大小,它似乎赶上了.

这是一个已知的问题？你可以在很多网站上看到它,例如http://gowalla.com.

有任何想法吗？

Answer 1

我设法通过向body元素添加min-width来解决gowalla和stackoverflow(它发生在页脚)上的这个问题.我认为,在您自己的网站上,最好将它应用于包含所有页面内容(包括页脚)的包装div.

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

这是一个例子:http://jsfiddle.net/qUyp2/

Answer 2

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

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

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

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 }

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

希望这可以帮助。