gpt4 book ai didi

html - 背景图像不会拉伸(stretch)整个页面宽度

转载 作者:太空狗 更新时间:2023-10-29 14:09:11 24 4
gpt4 key购买 nike

关于 this page ,我有一个 2-tone 背景。页面结构为:

<body>
<div id="upbg"/>
<div id="container"/>
</body

这个背景是通过在upbg中添加深色背景图片和在body上添加浅色背景图片来实现的。 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%”表示浏览器窗口的宽度,而不是整个页面的宽度,有没有办法解决这个问题?

谢谢,唐

最佳答案

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 )。除非您另有指定,否则它将与浏览器窗口一样宽。

问题是,你有另一个 child body可以比 body 宽: 两者都是 #container#footer被设计成它们总是至少 1026px宽的。这不会加宽它们的父元素,因为我们已经确定它们将与浏览器窗口一样宽;相反,他们溢出他们的 parent 。对此的默认响应是显示滚动条,以便您可以滚动查看溢出的内容;如果您添加了样式 overflow:hiddenhtmlbody ,您会发现您的内容和页脚被裁剪为浏览器窗口的大小,并且没有显示滚动条。

有几个简单的解决方案:

  1. 将#content 和#footer 包裹在#upbg 中,而不是放在它们前面。然后删除现有样式,并将其设置为如下样式:position: absolute; padding-top:25px; background: url(images/bg-dark.jpg) repeat-x scroll 0 0;这完成了两件事:您不再为 #upbg 指定宽度,因此允许它变得足够宽以包含它的新子项,并且它允许您摆脱很多现在不必要的样式(您需要清除您为 body 设置的填充,以及 #content 上的一些样式)。或者,
  2. 摆脱 #content 上的最小宽度和 #footer , 所以它们不会溢出。

关于html - 背景图像不会拉伸(stretch)整个页面宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/645279/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com