CSS：背景缺席水平滚动时 [英] CSS: background absent when scrolling horizontally

问题描述

确定我已经建立了这样的背景：

OK I have backgrounds set up like this:

<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像素框内。

So the idea is for the content to be within an 800px box, while the background for the content spans 100%, I have this same setup for different area like the header, footer, and main portions of the page. So they all haver different backgrounds spanning 100% while the content is all within an 800px box.

这一切工作正常，直到使窗口足够小，以显示水平滚动条，那么当你水平滚动时，发现部分不再有背景，但如果你把网页宽度，那么背景是存在的。

All this works fine, until you make the window small enough to show a horizontal scrollbar, then when you scroll horizontally, the revealed portion no longer has a background, yet if you make the page wider, then the background IS there.

您可以在这里看到： Clicky

有没有办法来解决这个问题？

Is there a way to fix this?

谢谢！

推荐答案

由于您使用的是固定宽度的内容区域，为什么不给你#container的（在网站上确实#inner_content_container）固定宽度也？因为你的形象是824px宽我只是用萤火，使您的容器宽度和你的问题解决了。

Since you are using a fixed width content area why not give your #container (actually #inner_content_container on your site) a fixed width also? Since your image is 824px wide I just used FireBug to make your container that width and your problem goes away.

请注意：当你这样做，你将需要给容器自动利润率也并设置溢出隐藏，如果你不想滚动条。

NOTE: When you do this you will need to give the container an auto margin too and set overflow to hidden if you don't want scroll bars..

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

这篇关于CSS：背景缺席水平滚动时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！