Question

所以到目前为止，这个网站的大部分都使用了自动居中（容器和导航有左边/右边边缘：自动），除了页脚外，事情似乎都很顺利。

当我调整窗口大小时，所有内容都很好地填充，除非我横向滚动页脚似乎在右侧被切断。我读过这可能是浏览器错误。虽然它出现在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;  }

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

我尝试过宽度：100％，最小宽度，宽度：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相关联，您必须：

明确设置容器的width或min-width。因此，如果stackoverflow在包裹min-width: 990px的{{1}}上设置footer（页脚包裹的960px +每侧15px的填充），那么它的问题就解决了。

将容器footerwrap设置为div，因为浮动元素会包含其内容。

看看this example fiddle。请注意前两个div的体验与您所看到的相同问题。如果你缩小或扩展小提琴中iframe窗口的大小，前两个div将与它收缩或放大，但仍然在水平卷轴上留下空白。第三和第四个div已经应用了我的修复。第五个div是显示内部div，如果没有在宽度中定义，将扩展到具有明确float集的容器的宽度。

作为旁注，它可能有用（我没有在许多浏览器中测试，但FF 11工作）实际上只是在width元素中添加float: left body元素body 1}}没有设定的宽度。正如this example所示，它似乎有效地使前两个div的行为与第3和第4个div一样。

我希望这会有所帮助。

原始答案

由于缺乏某些信息，我们可以做些什么并不清楚。以下是一些需要注意的事项：

您的background-image是否足够宽（或者是否/应该background-repeat: repeat-x应用以使其在需要时更宽？）

您的页脚宽度（1000px）是否与您的上限内容相匹配？如果页脚的约束比允许的上部内容区域（或页眉等）更窄，那么它的背景将不会对齐。

如果没有看到更多关于页面的html和css，并且不知道图像的大小以及你如何运作它的意图，这是我能做的最好的事情。

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

1 个答案:

关于Stackoverflow类似的评论