因此,到目前为止,该站点的大多数站点都使用自动居中(容器和导航器具有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/

最佳答案

关于您对Stackoverflow类似的评论

(至少自2012年4月29日起)

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

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


明确设置容器的widthmin-width。因此,如果stackoverflow在包裹min-width: 990pxfooter上设置一个footerwrap(页脚包装的960px +每侧15px的填充),则可以解决其问题。
将容器div设置为float,因为浮动元素会包装其内容。


看看this example fiddle。请注意,前两个div遇到的问题与您看到的相同。如果您在小提琴中缩小或扩展iframe窗口的大小,则前两个div会随之缩小或放大,但水平滚动条上仍会留有空白。第三和第四div已经应用了我的上述修复方法。第五个div表示以下事实:如果内部div的宽度未定义,则将扩展到具有显式width设置的容器的宽度。

附带说明一下,在float: left没有设置宽度的情况下,实际上只是向body元素添加body可能是可行的(我没有在许多浏览器中进行过测试,但是FF 11可以工作) 。正如this example所示,这似乎在使前两个div的行为与第3 div和第4 div一样有效。

我希望这有帮助。

原始答案

由于缺少某些信息,目前尚不清楚该怎么办。以下是一些要寻找的东西:


您的background-image是否足够宽(或者可以/如果需要,可以应用background-repeat: repeat-x使其更宽)吗?
页脚宽度(1000px)是否与内容的上限宽度匹配?如果将页脚限制为比允许的上部内容区域(或页眉等)窄,则其背景将无法对齐。


这是我能做的最好的事情,而无需查看页面的更多html和css,并且不知道图像的大小以及您打算如何使用它。

关于css - 调整窗口大小时,页脚背景图案被截断,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/10360936/

10-12 00:17
查看更多