在这个页面上,我有一个双色背景.页面的结构是:
通过向upbg添加深色背景图像并在身体上添加较亮的背景图像来实现此背景.upbg的css是:
#upbg { background: #FFFFFF url(images/bg-dark.jpg) repeat-x scroll 0 0; height: 275px; left: 0; position: absolute; top: 0; width: 100%; }如果您使浏览器窗口非常窄以显示滚动条,那么如果您向右滚动,您会注意到upbg的背景图像不会填满页面的整个宽度.
我的猜测是因为'width:100%'表示浏览器窗口的宽度,而不是页面的整个宽度,有没有办法解决这个问题？
谢谢,唐
1> Shog9..：我的猜测是因为'width:100%'表示浏览器窗口的宽度,而不是页面的整个宽度,有没有办法解决这个问题？
100%表示它将与它相对于它定位的父元素一样宽(在这种情况下
body,其宽度将基于其父元素的宽度html).除非另有说明,否则它将与浏览器窗口一样宽.问题是,你有另一个孩子
body可能会比宽body:这两个#container和#footer的风格,使得他们永远是至少1026px宽.这并没有扩大它们的父元素,因为我们已经确定它们将与浏览器窗口一样宽; 相反,他们溢出了他们的父母.对此的默认响应是显示滚动条,以便您可以滚动并查看溢出的内容; 如果您将样式添加overflow:hidden到html或body,您会发现您的内容和页脚剪裁到浏览器窗口的大小,并且没有显示滚动条.有几个简单的解决方案:
在#upbg中包装#content和#footer而不是在它们之前.然后删除现有的样式,并按如下方式设置样式:
position: absolute; padding-top:25px; background: url(images/bg-dark.jpg) repeat-x scroll 0 0;这样就完成了两件事:你不再为#upbg指定宽度,从而允许它变得足够宽以包围它的新子节点,它允许你摆脱它很多现在不必要的样式(你要清除你设置的填充body,以及一些样式#content).交替,摆脱对最小宽度的
#content和#footer,所以他们不会溢出.
京公网安备 11010802040832号 | 京ICP备19059560号-6 