背景图像无法拉伸整个页面宽度 [英] background image doesn't stretch full page width
问题描述
在此页面上，我有2色调的背景。页面的结构为：
On this page, I have a 2-tone background. The structure of the page is:
<body>
<div id="upbg"/>
<div id="container"/>
</body
此背景是通过在upbg和机身上的背景图像更浅。 upbg的CSS是：
This background is achieved by adding a dark background image to upbg and a lighter background image on the body. The css for upbg is:
#upbg {
background: #FFFFFF url(images/bg-dark.jpg) repeat-x scroll 0 0;
height: 275px;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
如果您使浏览器窗口非常狭窄以致于出现滚动条，那么如果滚动到右侧，您会注意到upbg的背景图像无法填充页面的整个宽度。
If you make the browser window very narrow such that scrollbars appear, then if you scroll across to the right you'll notice that the background image of upbg doesn't fill the entire width of the page.
我的猜测是，这是因为'width ：100％表示浏览器窗口的宽度，而不是页面的整个宽度，是否可以解决此问题？
My guess is that this is because 'width: 100%' means the width of the browser window, rather than the entire width of the page, is there a way to fix this?
感谢，
Don
Thanks, Don
推荐答案
我的猜测是这是因为
'width：100％'意味着
浏览器窗口的宽度而不是页面的整个
宽度，有没有办法使
修复此问题？
My guess is that this is because 'width: 100%' means the width of the browser window, rather than the entire width of the page, is there a way to fix this?
100％表示其宽度将与它相对于其父元素的位置一样宽（在这种情况下， body 其中将基于其父元素 html 的宽度）。除非另行指定，否则它将与浏览器窗口一样宽。
100% means it'll be as wide as the parent element it is positioned relative to (in this case, body, the width of which will be based on the width of its parent, html). Which will be as wide as the browser window, unless you specify otherwise.
问题是，您还有一个 body 的孩子，可能比 body宽： #container 和 #footer 的样式均应使其始终至少 1026px 宽。这不会扩大其父元素，因为我们已经确定它们的父元素将与浏览器窗口一样宽；相反，他们溢出父母。对此的默认响应是显示滚动条，以便您可以滚动和查看溢出的内容。如果您将样式 overflow：hidden 添加到 html 或 body ，您会发现内容和页脚被剪裁为浏览器窗口的大小，并且没有滚动条显示。
The problem is, you have another child of body which can be wider than body: both #container and #footer are styled such that they will always be at least 1026px wide. This does not widen their parent elements, as we've already established that those will be as wide as the browser window; instead, they overflow their parents. The default response to this is to display scrollbars so that you can scroll and view the overflowing content; if you added the style overflow:hidden to html or body, you'd find your content and footer clipped to the size of the browser window, and no scrollbars displayed.
有两个简单的解决方案：
There are a couple of easy solutions to this:
- 包装#content和#upbg中的#footer，而不是在它们之前添加。然后删除现有样式，并按如下所示对其进行样式设置：
position：absolute; padding-top：25px;背景：url（images / bg-dark.jpg）repeat-x滚动0 0;这完成了两件事：您不再为#upbg指定宽度，从而使它变得足够宽来封装它的新子代，它可以让您摆脱许多不必要的样式（您需要清除为body设置的填充以及#content上的某些样式）。或者， - 摆脱
#content和#footer ，这样它们就不会溢出。
- Wrap #content and #footer in #upbg instead of preceding them with it. Then remove the existing styles, and style it as follows:
position: absolute; padding-top:25px; background: url(images/bg-dark.jpg) repeat-x scroll 0 0;This accomplishes two things: you're no longer specifying a width for #upbg, thus allowing it to become wide enough to enclose its new children, and it allows you to get rid of a lot of now-unnecessary styling (you'll want to clear out the padding you've set forbodyas well, along with some style on#content). Alternately, - Get rid of the minimum width on
#contentand#footer, so they don't overflow.
这篇关于背景图像无法拉伸整个页面宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
