CSS：水平滚动时背景消失

Question

OK I have backgrounds set up like this:

HTML

<div id="container">
    <div id="content">
    CONTENT HERE
    </div>
</div>

CSS

#container
{
    background:url(image.gif);
}
#content
{
    width:800px;
    margin:auto;
}

因此，内容应该位于一个800像素的框中，而内容的背景跨越100％，我对页面的不同区域都采用了相同的设置，如页眉、页脚和主要部分。因此，它们都有不同的背景跨越100％，而内容都在800像素的框内。

所有这些都很好，直到您使窗口变得足够小以显示水平滚动条，然后当您水平滚动时，所显示的部分将不再具有背景，但如果您使页面更宽，则背景会出现。

您可以在这里看到它：点击这里 有什么办法可以解决这个问题吗？

谢谢！！

- JD Isaacks

Answer 1

由于您正在使用固定宽度的内容区域，为什么不给您的#container（实际上是您网站上的#inner_content_container）也设置一个固定宽度呢？由于您的图像宽度为824px，我只需使用FireBug将您的容器设置为该宽度，您的问题就解决了。

注意：这样做时，您还需要为容器设置自动边距，并将溢出设置为隐藏，以防止出现滚动条。

#container {
  margin:auto;
  overflow:hidden;
  width:824px;
}

- Randy Simon

---

这会使视口的宽度必须为824，才不会显示滚动条，我希望600x800分辨率的用户在最大化时不再有水平滚动条。但是你给了我一个解决办法，对于头和尾部，我将内容设置为与容器相同的背景色，而对于主要部分，我只需将其设置为白色背景即可。这样就解决了 :) - JD Isaacks

我认为你也可以使用overflow:hidden（我更新了我的回答）。无论如何，很高兴你解决了它。 - Randy Simon

Answer 2

我发现（或者看起来是这样），当你滚动时，只有#content的背景是“显露”的，而不是#container的背景。所以我做的是将#content设置为与#container相同的背景。这样就可以解决问题，而不必让滚动条出现在非内容区域。

- JD Isaacks

---

@easwee 在你提出问题后的两天内，你不能接受自己的答案。我更愿意标记别人的答案而不是我的。所以我想给别人一个机会，让他们给出比我更好的答案或者扩展我的答案，这样我就可以标记他们了。 :) - JD Isaacks