css - 调整窗口大小时，页脚背景图案被截断

Question

到目前为止，该网站的大部分内容都使用自动居中(容器和导航栏有 margin-left/right:auto)，除了页脚之外，一切似乎都很顺利。

当我调整窗口大小时，一切都被很好地填充，除了当我水平滚动时，页脚似乎在右侧被切断。我读到这可能是浏览器错误。虽然它出现在 IE、chrome 和 firefox 中，所以它可能只是草率的编码(我是一个大新手)。

这是CSS:

 #footer {
background-image:url(../Images/footer_bg.jpg);
color: white;
height:300px;
padding-top:20px;
 }


 /*I have 4 headings with Ps that I want to display horizontally side by side*/
#footerContent{
   min-width:1000px;    
   }

/*So I tried floating <li> inside <ul> and limiting its width, which worked fine */
    #footerContent ul{
        width:1000px;
    margin-left:auto;
    margin-right:auto;
    }

#footerContent li {float:left; width:250px;  }

重申一下，当浏览器全屏显示或调整大小时，它工作正常。但是在调整大小并使用水平滚动条一直向右滚动后，背景图像将被切断。

我试过 width:100%, min-width, width:1000px;但这些似乎都不起作用。

http://postimage.org/image/3so264fnb/

Answer 1

关于您关于 Stackoverflow 相似的评论

(至少截至 4-29-2012)

stackoverflow 上的问题似乎是 footer 包含另一个 div 元素，footerwrap，它的 width: 960px 设置为它，但 footer 本身没有宽度设置。 div 是 basically designed to simply "group" block level content .一个常见的误解是 div 会随其内容展开。实际上，如果在父级上设置了显式 width，则 div 会扩展到其父级 。如果没有，则它适合浏览器窗口。这就是您(和 stackoverflow)正在经历的。

要使 div 与内容 width 相关，您必须:

1. 明确设置容器的width 或min-width。所以，如果 stackoverflow 在 footerwrap，那么它的问题就解决了。
2. 将容器 div 设置为 float，因为 float 元素会包裹其内容。

看看this example fiddle .请注意前两个 div 遇到的问题与您所看到的相同。如果您在 fiddle 中缩小或扩大 iframe 窗口的大小，前两个 div 将随之缩小或扩大，但仍会在水平滚动条上留下空白。第三个和第四个 div 已经应用了我上面的修复。第五个 div 是为了表明内部 div，如果未在宽度中定义，将扩展到具有显式 width 集的容器的宽度。

作为旁注，实际上只需将 float: left 添加到 body 可能有效(我没有在许多浏览器中测试过，但 FF 11 有效)在 body 没有设置宽度的情况下。作为this example显示，它似乎可以有效地使前两个 div 的行为与第 3 个和第 4 个 div 相同。

希望对您有所帮助。

原始答案

由于缺少一些信息，所以有点不清楚可以做什么。以下是一些需要注意的事项:

1. 您的 background-image 是否足够宽(或者是否可以/是否应该应用 background-repeat: repeat-x 以在需要时使其更宽)？
2. 您的页脚宽度 (1000px) 是否与上部内容宽度匹配？如果页脚被限制为比上部内容区域(或页眉等)允许的宽度窄，那么它的背景将不会对齐。

这是我能做的最好的事情，而不会看到页面的更多 html 和 css，并且不知道图像的大小和您对它如何运行的意图。