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宽，那么这可能是您想要的（但您可能需要调整以考虑额外的利润） / border等）。

以下是一个示例：http://jsfiddle.net/qUyp2/

Answer 2

我认为你在谈论一个问题，其中100％宽度等于视口的宽度而不是使背景变为内容宽度的内容，你应该将min-width添加到背景div，例如：

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

.content
{
    width:960px;
}

有效！

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 }

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

希望这有帮助。

Answer 4

将内容的宽度更改为2000px而不是滚动，看看会发生什么：滚动区域中没有背景

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

4 个答案: