css 中如何设置div的宽度与网页宽度一样呀？[解决就结贴]

想通过层的重叠来添加背景，希望能根据浏览器和网页的大小自动调整这个背景层。
#HeadBg
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
margin: 0px 0px 0px 0px;
height: 80px;
background-color: Gray;
}
以上是我自己的代码，但是这个只能实现根据浏览器的大小自动适应宽度，如果出现横向滚动条，那么当移动滚动条时，就会发现这个背景层的宽度其实只等于浏览器的宽度，所以当滚动条移动时会发现左边一块地方并没有被背景层所填充。现在急求解决办法！

解决方案 »

  1.   

    背景层---width: 这里用绝对定位
      

  2.   

    在js中设置宽度  document.documentElement.clientWidth
      

  3.   

    写个if语句判断一下，if(document.body.scrollWidth>window.screen.availWidth)
    { document.all.HeadBg .style.Width=document.body.scrollWidth;}
    else
    {document.all.HeadBg .style.Width=window.screen.availWidth;}
      

  4.   

    mylibin js这句话，加哪？能说具体点吗？谢谢
      

  5.   

    width:inherit     //Explicitly sets the value of this property to that of the parent.
      

  6.   

    加在 onload的javascript事件里
      

  7.   

    “inherit”并非“width”属性的有效值
      

  8.   

    onload="document.getElementById('对象名').width= document.body.clientWidth"
      

  9.   

    if(document.body.scrollWidth>window.screen.availWidth) 
    { document.all.HeadBg .style.Width=document.body.scrollWidth;} 
    else 
    {document.all.HeadBg .style.Width=window.screen.availWidth;}试试这个，你说的那种情况我遇到过，不过是高度的，用这种方法解决的
      

  10.   

    我的CSS代码：body
    {
    background: #fff;
    font: 12px/22px Verdana,Arial,sans-serif, "Times New Roman" ,宋体;
    color: #000;
    text-align: center;
    width: 100%;
    margin: 0px 0px 0px 0px;
    }
    #HeadBg
    {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 80px;
    background-color:Yellow;
    z-index: -1;
    }
    我在aspx中的部分代码<body>
        <div id="HeadBg">
        </div>
        <div id="MainBody">
            <form id="form1" runat="server">
            </form>
        </div>
    </body>
      

  11.   

    z-index: -1;
    这个是关键要考虑的问题
      

  12.   

    WH514081671 的办法试过了不行。
    我现在有一个办法，不过不知怎么回事，第一次使用的时候没效果。现在倒挺正常。
        <div id="HeadBg">
        <img width=970px src=" "  height="0"/>
        </div>
    就是加了一个空的img.
    大家看看，这个办法行不行？另外有没有其它办法
      

  13.   

    不好用吗？我确实是实现了
    if(document.body.scrollWidth>window.screen.availWidth)  
    { document.all.HeadBg .style.Width=document.body.scrollWidth;}  
    else  
    {document.all.HeadBg .style.Width=window.screen.availWidth;} 
    还有一个高度指定了吗
    document.all.HeadBg .style.Height=window.screen.availHeight
      

  14.   

    MainBody这个css固定大小为970px;
    以下是图片：当浏览器大小小于970px，HeadBg那层只能填充浏览器窗口大小
    当滚动条移动时就会发现旁边是空白
      

  15.   

    谢谢WH514081671 ，我在<head></head>之间加入
    <script>
    if(document.body.scrollWidth>window.screen.availWidth)   
    { document.all.HeadBg .style.Width=document.body.scrollWidth;}   
    else   
    {document.all.HeadBg .style.Width=window.screen.availWidth;}  
    </script>然后运行，就和上图那效果一样，不知道是不是还要加什么语句?
      

  16.   

    在脚本里把宽度和高度设置成屏幕可活动的宽度和高度，没道理不好用
    document.all.HeadBg .style.Width=window.screen.availWidth
    document.all.HeadBg .style.Height=window.screen.availHeight
      

  17.   

    是不是这个脚本语法有问题呀？
    我改成：document.all.HeadBg.style.Height = "1000px";
    或document.all.HeadBg.style.Height = 1000px;
    都没反应的。
      

  18.   

    我这里确实没问题，我用的是2003，在用这个试试吧，在不好用，我也无能为力了
    document.getElementById("HeadBg").style.width=window.screen.availWidth 
    document.getElementById("HeadBg").style.height=window.screen.availHeight
      

  19.   

    行了，终于调出来了。
    找到两个原因
    第一、放在<head></head>之间，找不到这个id,所以我把它放到HeadBg中去了。
    第二，style.Width无法识别，只能识别小写。
    郁闷，要求这么严格。
    不过你这个虽然可以实现效果，但是有了另一个问题，就是长度太长了，远远超过了970px.不知道是怎么回事
      

  20.   

    window.screen.availHeight是由很多数据出现滚动条时用的
    如果只是浏览器大小，用这个window.screen.availWidth  ，window.screen.availWidth就行  
    最好是宽度和高度在减点，宽度减20px（大约滚动条的宽度）就行了，高度减125px左右（IE HeightBAR）
      

  21.   

    刚刚打错了
    window.screen.availHeight是由很多数据出现滚动条时用的 
    如果只是浏览器大小，用这个window.screen.height  ，window.screen.width就行   
    最好是宽度和高度在减点，宽度减20px（大约滚动条的宽度）就行了，高度减125px左右（IE HeightBAR）
      

  22.   

    试试这个样式：body {
    background-attachment: fixed;
            background-color: #FFF;                   /* 这里设置背景颜色   */
            background-repeat: repeat-x;              /* 控制背景图片重复方向*/
            background-position: center bottom;
    background-image: url(../images/bg.gif);  /* 在这里添加背景图片，可以自动扩展 */     }上面是所有页面的背景设置。你可以修改为指定的层的样式，让图片自动覆盖指定层区域，应用可以达到你的目的。
      

  23.   


    另外，添加背景，不用楼主这样的麻烦。body  对象，或指定的层(div)都有 background 这个样式属性，照我上面的例子，全部可以控制。
      

  24.   

    谢谢　bjy3199  的建议，但是我真正想实现的效果并不只是这样，除了在头部有一个随浏览器自动调整的背景，在页面的底部也希望实现一个自动调整的背景。
    如果使用body的background-color或background-image就只能实现一种背景颜色，或图片了。
      

  25.   

    为何要把背景颜色单独放在一个层里？直接放在body里就可以撒，背景颜色和背景图可以同时设定