关于层满屏显示的问题

有一个层：
<div style="position:absolute;top:0px;left:0px;background-color:#999;display:none" id="container">
<script type="text/javascript">document.write(new Date().toLocaleDateString())</script>
</div>
请问，我想在window.onload事件中，将这个层满屏显示，即该页面可能有滚动条也可能没有滚动条，无论在哪种
情况下，该层都要占据整个屏幕。谢谢。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

onload = function(){
document.getElementById('container').style.height = Math.max(document.body.scrollHeight,document.body.clientHeight);
}
只要一句话就可以啦：
<div style="position:absolute;top:0px;left:0px;background-color:#999;width:100%;display:none" id="container">
就是width:100%，这样就行了
<div style="position:absolute;top:0px;left:0px;background-color:#999;border : 1px solid red;display:" id="container">
<script type="text/javascript">document.write(new Date().toLocaleDateString())</script>
</div>
<script>
var o=document.getElementById("container")
o.style.width=window.screen.width
o.style.height=window.screen.height
</script>
抱歉，发现不够，改成这样吧：
<script type="text/javascript">
  document.write(new Date().toLocaleDateString())
  onload=function() {
  document.getElementById('container').style.width= parseInt(document.body.scrollWidth)
}
</script>
得在脚本中改，因为如果有滚动条的时候，用100%就不够了，滚动后部分div少了，所以在脚本加比较好
to:lxtrayn你的方法不可行，在ie6和firefox下。to:toury
你给出的是分辨率，在1024下，没有滚动条的页面会出现滚动条，不合理。。to:aperson111
在ie6下测试如果有以下的html
<div style="height:1000px;"></div>你拖动滚动条，会发现下面一片白色，并没有被挡住。没有达到满屏的目的。
哦，明白了，连高度也要满屏，呵呵，不好意思。
加一句：
document.getElementById('container').style.height= parseInt(document.body.scrollHeight);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title> new document </title>
</head>
<script type="text/javascript">

</script>
<body>
<div id="odiv" style="top:0px;left:0px;width:100%;height:100%;background-color:#999" id="container"></div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
to:aperson111感谢回复。
经测试，如果去掉<div style="height:1000px;"> </div> 中的style,你会发现，根本就无法做到满屏，你可以试试。
<script type="text/javascript">
  document.write(new Date().toLocaleDateString())
  onload=function() {
  document.getElementById('container').style.width= parseInt(document.body.scrollWidth)>parseInt(document.body.clientWidtht)?parseInt(document.body.scrollWidth):parseInt(document.body.clientWidth);
document.getElementById('container').style.height= parseInt(document.body.scrollHeight)>parseInt(document.body.clientHeight)?parseInt(document.body.scrollHeight):parseInt(document.body.clientHeight);
}
</script>
抱歉啊，终于明白了，本人比较粗心哈，呵呵，测试过了，没有问题了
其实可以把这个onlode的function写成一个resize函数，每次你的页面的高度和宽度可能发生变化的时候，调用这个函数，这样就可以做到完全的自适应了！
好像有个地方写错了一个字母，晕
afdsaaaaaaaaaaaaaaaddddddddddddddddddddddddfffdfssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
<div style="position:absolute;top:0px;left:0px;background-color:#999;" id="container">
<div style='height:1000px;'> </div>
<script type="text/javascript">
  document.write(new Date().toLocaleDateString())
  onload=function() {
  document.getElementById('container').style.width= parseInt(document.body.scrollWidth)>parseInt(document.body.clientWidth)?parseInt(document.body.scrollWidth):parseInt(document.body.clientWidth);
document.getElementById('container').style.height= parseInt(document.body.scrollHeight)>parseInt(document.body.clientHeight)?parseInt(document.body.scrollHeight):parseInt(document.body.clientHeight);
}
</script>
</div>
这回可以了
to:aperson111
感谢回复,不知道您测试过没有?
我现在家里测试,使用ie8,有以下面几个问题.第一,在ie8下,使用document.body.clientWidth根本行不通,clientHeight也是如此.
修改为document.documentElement.clientWidth可以.第二,我又加上<div style="height:1000px;"></div>这个,结果最下面还是会有白色空白出现.并没有完全满屏.第三,我修改为以下代码,在ie8和firefox下通过<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <script type="text/javascript">        var container;        window.onload = function()
        {
            var marginTop =parseInt(window.getComputedStyle ? window.getComputedStyle(document.body, null).marginTop : document.body.currentStyle.marginTop);
            window.alert(marginTop);
            container = document.getElementById("container");
            var width = parseInt(document.body.scrollWidth) > parseInt(document.documentElement.clientWidth) ? parseInt(document.body.scrollWidth) : parseInt(document.documentElement.clientWidth);
            var height = parseInt(document.body.scrollHeight) > parseInt(document.documentElement.clientHeight) ? parseInt(document.body.scrollHeight) + (marginTop * 2) : parseInt(document.documentElement.clientHeight);
            container.style.width = width + "px";
            container.style.height = height + "px";
        }

        function clickHandler()
        {
            container.style.display = "block";
        }

    </script>
</head>
<body><div id="container" style="position:absolute;top:0px;left:0px;background-color:#999;display:none">
ddddddddddddddd
</div>
<input type="button" onclick="clickHandler()" value="test" />
<div style="width:1000px;">11</div>
</body>
</html>
但是ie6下,怎么样还不清楚.
用下面这个方法试下：
<script type = "text/javascript">
/*
让模糊层满屏显示
*/
function setDiv(){
document.getElementById("mask_div").style.width = window.screen.width;
document.getElementById("mask_div").style.height = window.screen.height;
}
</script>
</head><body onLoad = "setDiv()">
      <div id="mask_div" style="position:absolute;background:#FF6699;"></div>
</body>
<html>
<head>
<style>
body{
margin:0;
}
#container{
top:0;
left:0;
position:absolute;
background:#ccc;
width:100%;
filter:alpha(opacity:50);
opacity:0.5;
}
</style>
<script>
onload = function(){
document.getElementById('container').style.height = Math.max(document.body.clientHeight,document.body.scrollHeight)+'px';
document.getElementById('container').style.width =  Math.max(document.body.clientWidth,document.body.scrollWidth)+'px';
}
</script>
</head>
<body>
<div style="height:1500px;width:1500px;border:#000 1px solid;background:#aef;">124</div>
<div id="container">
</div>
</body>
</html>
lz同志，我没有ie8，我用的是ie7和ff3，所以只在这两个上测试了。
还有个虚拟机里面是ie6，懒得测试了。
TO:aperson111
我修改了代码，在ie6、ie8、firefox 3、谷歌中都可以了。非常感谢。