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

Question

因此，到目前为止，该网站的大部分内容都使用自动居中（容器和导航具有左/右：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 相似的评论

（至少截至 2012 年 4 月 29 日）

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

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

1. 显式设置容器的width 或min-width。所以，如果stackoverflow在包裹footerwrap的footer上设置了min-width: 990px（footerwrap的960px+每边15px的padding），那么问题就解决了。
2. 将容器 div 设置为 float，因为浮动元素会包裹其内容。

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

附带说明一下，在body 没有的情况下，实际上只需将float: left 添加到body 元素中，它可能有效（我没有在许多浏览器中测试过，但FF 11 有效）一个设定的宽度。正如this example 所示，它似乎可以有效地使前两个 div 的行为与第三和第四个 div 一样。

我希望这会有所帮助。

原答案

目前还不清楚可以做什么，因为缺少一些信息。以下是一些需要注意的事项：

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

这是我能做的最好的事情，而无需查看更多页面的 html 和 css，也不知道图像的大小和您对其功能的意图。