关于层满屏显示的问题

heywap 2009-08-19 04:17:24

有一个层：





<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事件中，将这个层满屏显示，即该页面可能有滚动条也可能没有滚动条，无论在哪种
情况下，该层都要占据整个屏幕。谢谢。

...全文

275 19 打赏收藏转发到动态举报

写回复

用AI写文章

19 条回复

切换为时间正序

请发表友善的回复…

发表回复

愚者只看星不看答案 2009-08-20

打赏
举报

TO:aperson111
我修改了代码，在ie6、ie8、firefox 3、谷歌中都可以了。非常感谢。

aperson111 2009-08-20

打赏
举报

lz同志，我没有ie8，我用的是ie7和ff3，所以只在这两个上测试了。
还有个虚拟机里面是ie6，懒得测试了。

sohighthesky 2009-08-20

打赏
举报

学习了，
每天回帖即可获得10分可用分！

lxtrayn 2009-08-20

打赏
举报



<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>

myyhml 2009-08-19

打赏
举报

用下面这个方法试下：
<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>

愚者只看星不看答案 2009-08-19

打赏
举报

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下,怎么样还不清楚.

aperson111 2009-08-19

打赏
举报

好像有个地方写错了一个字母，晕

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>

这回可以了

zcgzdhxm 2009-08-19

打赏
举报

han

aperson111 2009-08-19

打赏
举报

其实可以把这个onlode的function写成一个resize函数，每次你的页面的高度和宽度可能发生变化的时候，调用这个函数，这样就可以做到完全的自适应了！

aperson111 2009-08-19

打赏
举报

愚者只看星不看答案 2009-08-19

打赏
举报

to:aperson111

感谢回复。
经测试，如果去掉<div style="height:1000px;"> </div> 中的style,你会发现，根本就无法做到满屏，你可以试试。

s_liangchao1s 2009-08-19

打赏
举报



<!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">

<!--

	window.onload = function(){

		var odiv = document.getElementById("odiv");

		if(document.all){

			odiv.style.position = "absolute";

			odiv.style.height = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);

		}else{

			odiv.style.position = "fixed";

		}

	}

//-->

</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>

aperson111 2009-08-19

打赏
举报

哦，明白了，连高度也要满屏，呵呵，不好意思。
加一句：
document.getElementById('container').style.height= parseInt(document.body.scrollHeight);

愚者只看星不看答案 2009-08-19

打赏
举报

to:lxtrayn

你的方法不可行，在ie6和firefox下。

to:toury
你给出的是分辨率，在1024下，没有滚动条的页面会出现滚动条，不合理。。

to:aperson111
在ie6下测试

如果有以下的html
<div style="height:1000px;"></div>

你拖动滚动条，会发现下面一片白色，并没有被挡住。没有达到满屏的目的。

aperson111 2009-08-19

打赏
举报

我慢了～～～～～

aperson111 2009-08-19

打赏
举报

抱歉，发现不够，改成这样吧：
<script type="text/javascript">
document.write(new Date().toLocaleDateString())
onload=function() {
document.getElementById('container').style.width= parseInt(document.body.scrollWidth)
}
</script>
得在脚本中改，因为如果有滚动条的时候，用100%就不够了，滚动后部分div少了，所以在脚本加比较好

toury 2009-08-19

打赏
举报

<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>

aperson111 2009-08-19

打赏
举报

只要一句话就可以啦：
<div style="position:absolute;top:0px;left:0px;background-color:#999;width:100%;display:none" id="container">
就是width:100%，这样就行了

lxtrayn 2009-08-19

打赏
举报



onload = function(){

	document.getElementById('container').style.height = Math.max(document.body.scrollHeight,document.body.clientHeight);

}

本课程从实战角度出发，通过一个项目，帮助大家掌握从驱动到应用层整个系统级的视频采集和显示系统的搭建！本课程的最大特色是什么？本课程从SOC硬件底层出发一步步带领大家搭建一个基于LINUX系统的视频...

Re：计算机网络传输层 TCP和UDP协议 # 传输层协议 TCP 和 UDP 的应用场景要发送的内容多，需要将发送的内容分成多个数据包发送（TCP）要发送的内容少，一个数据包就能发送全部内容（UDP） # 传输层协议和应用层...

本套课程将对三层架构的调用过程、系统主要方法、各个界面功能实现方法等内容进行讲解和说明，对重点内容进行注释，并对毕业答辩过程的主要问题进行说明。注意：学院会员可以免费学习部分课程，有需要可付费购买...

并大胆设想如果您也是CAN协议开发人员，在CAN协议开发初期面临什么样的物理层问题，如何修正来解决相应问题，进一步了解CAN物理层的通信特性，从而理解CAN总线是如何保证汽车级通信要求，最后总结汽车CAN物理层常见...

SpringData是用来简化基于Spring构建的应用程序的持久层框架的框架。简化了持久层方案的方案。SpringData有很多子模块，其中SpringDataJPA就是其中一个子模块。简化了我们的持久层开发工作，可以让我们在持久层不用...

JavaScript

87,910

社区成员

224,616

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章