因此,到目前为止,该站点的大多数站点都使用自动居中(容器和导航器具有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
本身没有宽度设置。 div
是basically designed to simply "group" block level content。一个常见的误解是div
会随着内容的扩展而扩展。实际上,如果在父级上设置了显式的div
,则width
会扩展为其父级。如果没有,则适合浏览器窗口。这就是您(以及stackoverflow)所经历的。
若要使div
与内容width
相关,您必须:
明确设置容器的width
或min-width
。因此,如果stackoverflow在包裹min-width: 990px
的footer
上设置一个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/