62,243
社区成员
发帖
与我相关
我的任务
分享css 中如何设置div的宽度与网页宽度一样呀？[解决就结贴]
想通过层的重叠来添加背景，希望能根据浏览器和网页的大小自动调整这个背景层。
#HeadBg
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
margin: 0px 0px 0px 0px;
height: 80px;
background-color: Gray;
}
以上是我自己的代码，但是这个只能实现根据浏览器的大小自动适应宽度，如果出现横向滚动条，那么当移动滚动条时，就会发现这个背景层的宽度其实只等于浏览器的宽度，所以当滚动条移动时会发现左边一块地方并没有被背景层所填充。
现在急求解决办法！
#HeadBg
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
margin: 0px 0px 0px 0px;
height: 80px;
background-color: Gray;
}
以上是我自己的代码，但是这个只能实现根据浏览器的大小自动适应宽度，如果出现横向滚动条，那么当移动滚动条时，就会发现这个背景层的宽度其实只等于浏览器的宽度，所以当滚动条移动时会发现左边一块地方并没有被背景层所填充。
现在急求解决办法！
...全文
请发表友善的回复…
发表回复
StopCry 2009-12-27
- 打赏
- 举报
为何要把背景颜色单独放在一个层里？直接放在body里就可以撒，背景颜色和背景图可以同时设定
xiangqianbo 2009-08-09
- 打赏
- 举报
学习...
爱优优 2009-08-09
- 打赏
- 举报
今天路过，搜索了一下自己回过的帖子，竟然还有人回复1年前的帖子，感动啊...
madshime 2009-04-11
- 打赏
- 举报
回帖是一种美德！每天回帖即可获得 10 分可用分！
Solutioned 2008-04-27
- 打赏
- 举报
min-width:网页宽度
luzhide2008 2008-04-17
- 打赏
- 举报
没遇到过这样的问题
chuxue1342 2008-04-17
- 打赏
- 举报
接分了!
changjiangzhibin 2008-04-17
- 打赏
- 举报
mark
voice007 2008-04-16
- 打赏
- 举报
mark!
stg609 2008-04-16
- 打赏
- 举报
谢谢大家的帮助，问题基本解决。
stg609 2008-04-16
- 打赏
- 举报
谢谢 bjy3199 的建议，但是我真正想实现的效果并不只是这样，除了在头部有一个随浏览器自动调整的背景，在页面的底部也希望实现一个自动调整的背景。
如果使用body的background-color或background-image就只能实现一种背景颜色，或图片了。
如果使用body的background-color或background-image就只能实现一种背景颜色，或图片了。
爱优优 2008-04-16
- 打赏
- 举报
[Quote=引用楼主 stg609 的帖子:]
想通过层的重叠来添加背景，希望能根据浏览器和网页的大小自动调整这个背景层。
#HeadBg
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
margin: 0px 0px 0px 0px;
height: 80px;
background-color: Gray;
}
以上是我自己的代码，但是这个只能实现根据浏览器的大小自动适应宽度，如果出现横向滚动条，那么当移动滚动条时，就会发现这个背景层的宽度其实只等于浏览器的宽度，所以当滚动条移动时…
[/Quote]
另外，添加背景，不用楼主这样的麻烦。body 对象，或指定的层(div)都有 background 这个样式属性，照我上面的例子，全部可以控制。
想通过层的重叠来添加背景，希望能根据浏览器和网页的大小自动调整这个背景层。
#HeadBg
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
margin: 0px 0px 0px 0px;
height: 80px;
background-color: Gray;
}
以上是我自己的代码，但是这个只能实现根据浏览器的大小自动适应宽度，如果出现横向滚动条，那么当移动滚动条时，就会发现这个背景层的宽度其实只等于浏览器的宽度，所以当滚动条移动时…
[/Quote]
另外，添加背景，不用楼主这样的麻烦。body 对象，或指定的层(div)都有 background 这个样式属性，照我上面的例子，全部可以控制。
爱优优 2008-04-16
- 打赏
- 举报
试试这个样式：
body {
background-attachment: fixed;
background-color: #FFF; /* 这里设置背景颜色 */
background-repeat: repeat-x; /* 控制背景图片重复方向*/
background-position: center bottom;
background-image: url(../images/bg.gif); /* 在这里添加背景图片，可以自动扩展 */
}
上面是所有页面的背景设置。你可以修改为指定的层的样式，让图片自动覆盖指定层区域，应用可以达到你的目的。
body {
background-attachment: fixed;
background-color: #FFF; /* 这里设置背景颜色 */
background-repeat: repeat-x; /* 控制背景图片重复方向*/
background-position: center bottom;
background-image: url(../images/bg.gif); /* 在这里添加背景图片，可以自动扩展 */
}
上面是所有页面的背景设置。你可以修改为指定的层的样式，让图片自动覆盖指定层区域，应用可以达到你的目的。
WH514081671 2008-04-16
- 打赏
- 举报
[Quote=引用 34 楼 WH514081671 的回复:]
window.screen.availHeight是由很多数据出现滚动条时用的
如果只是浏览器大小，用这个window.screen.availWidth ，window.screen.availWidth就行
最好是宽度和高度在减点，宽度减20px（大约滚动条的宽度）就行了，高度减125px左右（IE HeightBAR）
[/Quote]
刚刚打错了
window.screen.availHeight是由很多数据出现滚动条时用的
如果只是浏览器大小，用这个window.screen.height ，window.screen.width就行
最好是宽度和高度在减点，宽度减20px（大约滚动条的宽度）就行了，高度减125px左右（IE HeightBAR）
window.screen.availHeight是由很多数据出现滚动条时用的
如果只是浏览器大小，用这个window.screen.availWidth ，window.screen.availWidth就行
最好是宽度和高度在减点，宽度减20px（大约滚动条的宽度）就行了，高度减125px左右（IE HeightBAR）
[/Quote]
刚刚打错了
window.screen.availHeight是由很多数据出现滚动条时用的
如果只是浏览器大小，用这个window.screen.height ，window.screen.width就行
最好是宽度和高度在减点，宽度减20px（大约滚动条的宽度）就行了，高度减125px左右（IE HeightBAR）
WH514081671 2008-04-16
- 打赏
- 举报
window.screen.availHeight是由很多数据出现滚动条时用的
如果只是浏览器大小，用这个window.screen.availWidth ，window.screen.availWidth就行
最好是宽度和高度在减点，宽度减20px（大约滚动条的宽度）就行了，高度减125px左右（IE HeightBAR）
如果只是浏览器大小，用这个window.screen.availWidth ，window.screen.availWidth就行
最好是宽度和高度在减点，宽度减20px（大约滚动条的宽度）就行了，高度减125px左右（IE HeightBAR）
stg609 2008-04-16
- 打赏
- 举报
行了，终于调出来了。
找到两个原因
第一、放在<head></head>之间，找不到这个id,所以我把它放到HeadBg中去了。
第二，style.Width无法识别，只能识别小写。
郁闷，要求这么严格。
不过你这个虽然可以实现效果，但是有了另一个问题，就是长度太长了，远远超过了970px.不知道是怎么回事
找到两个原因
第一、放在<head></head>之间，找不到这个id,所以我把它放到HeadBg中去了。
第二，style.Width无法识别，只能识别小写。
郁闷，要求这么严格。
不过你这个虽然可以实现效果，但是有了另一个问题，就是长度太长了，远远超过了970px.不知道是怎么回事
WH514081671 2008-04-16
- 打赏
- 举报
我这里确实没问题，我用的是2003，在用这个试试吧，在不好用，我也无能为力了
document.getElementById("HeadBg").style.width=window.screen.availWidth
document.getElementById("HeadBg").style.height=window.screen.availHeight
document.getElementById("HeadBg").style.width=window.screen.availWidth
document.getElementById("HeadBg").style.height=window.screen.availHeight
mylibin 2008-04-16
- 打赏
- 举报
没遇到
stg609 2008-04-16
- 打赏
- 举报
是不是这个脚本语法有问题呀？
我改成：document.all.HeadBg.style.Height = "1000px";
或document.all.HeadBg.style.Height = 1000px;
都没反应的。
我改成：document.all.HeadBg.style.Height = "1000px";
或document.all.HeadBg.style.Height = 1000px;
都没反应的。
WH514081671 2008-04-16
- 打赏
- 举报
在脚本里把宽度和高度设置成屏幕可活动的宽度和高度，没道理不好用
document.all.HeadBg .style.Width=window.screen.availWidth
document.all.HeadBg .style.Height=window.screen.availHeight
document.all.HeadBg .style.Width=window.screen.availWidth
document.all.HeadBg .style.Height=window.screen.availHeight
加载更多回复（28）
