最近一个项目中,需要做这样一件事情:
浏览器窗口中高和宽需要安百分比显示一个界面,当用户改变窗口大小时,界面也会随着进行变化,也就是说,不会出现任何的滚动条。
横向的html只需要使用百分比就可以搞定了,主要是纵向,因为浏览器纵向是可以无限长的,所以需要通过javascript来获取屏幕当前空白工作区域的 高度,然后设置界面的 高度。我的方法如下:
<html>
<head>
<script>
function init()
{
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement. clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body. clientWidth;
windowHeight = document.body.clientHeight;
}
var firstsheet=document.styleSheets[0];
var therules=firstsheet.cssRules? firstsheet.cssRules: firstsheet.rules;
var treeHeight = windowHeight - 238;
therules[0].style.height= treeHeight + "px";
}
</script>
</head>
<body οnresize="init();">
<script language="javascript" type="text/javascript">
init();
</script>
</body>
当载入页面或onresize事件被激发后,执行 init ,取得屏幕 高度参数,然后重新设定css 高度。
这个代码在ie/firefox都可以正常的执行。
浏览器窗口中高和宽需要安百分比显示一个界面,当用户改变窗口大小时,界面也会随着进行变化,也就是说,不会出现任何的滚动条。
横向的html只需要使用百分比就可以搞定了,主要是纵向,因为浏览器纵向是可以无限长的,所以需要通过javascript来获取屏幕当前空白工作区域的 高度,然后设置界面的 高度。我的方法如下:
<html>
<head>
<script>
function init()
{
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement. clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body. clientWidth;
windowHeight = document.body.clientHeight;
}
var firstsheet=document.styleSheets[0];
var therules=firstsheet.cssRules? firstsheet.cssRules: firstsheet.rules;
var treeHeight = windowHeight - 238;
therules[0].style.height= treeHeight + "px";
}
</script>
</head>
<body οnresize="init();">
<script language="javascript" type="text/javascript">
init();
</script>
</body>
当载入页面或onresize事件被激发后,执行 init ,取得屏幕 高度参数,然后重新设定css 高度。
这个代码在ie/firefox都可以正常的执行。
这段代码我再调适的时候遇到过一些问题。当鼠标拖动页面最小和最大的时候,会死循环,原因不明。
在javascript中得到当前窗口的高和宽
<body><SCRIPT LANGUAGE="JavaScript">
var s = "";
s += "/r/n网页可见区域宽:"+ document.body.clientWidth;
s += "/r/n网页可见区域高:"+ document.body.clientHeight;
s += "/r/n网页可见区域宽:"+ document.body.offsetWidth +" (包括边线的宽)";
s += "/r/n网页可见区域高:"+ document.body.offsetHeight +" (包括边线的宽)";
s += "/r/n网页正文全文宽:"+ document.body.scrollWidth;
s += "/r/n网页正文全文高:"+ document.body.scrollHeight;
s += "/r/n网页被卷去的高:"+ document.body.scrollTop;
s += "/r/n网页被卷去的左:"+ document.body.scrollLeft;
s += "/r/n网页正文部分上:"+ window.screenTop;
s += "/r/n网页正文部分左:"+ window.screenLeft;
s += "/r/n屏幕分辨率的高:"+ window.screen.height;
s += "/r/n屏幕分辨率的宽:"+ window.screen.width;
s += "/r/n屏幕可用 工作区高度:"+ window.screen.availHeight;
s += "/r/n屏幕可用工作区宽度:"+ window.screen.availWidth;
alert(s);
</SCRIPT>
<body><SCRIPT LANGUAGE="JavaScript">
var s = "";
s += "/r/n网页可见区域宽:"+ document.body.clientWidth;
s += "/r/n网页可见区域高:"+ document.body.clientHeight;
s += "/r/n网页可见区域宽:"+ document.body.offsetWidth +" (包括边线的宽)";
s += "/r/n网页可见区域高:"+ document.body.offsetHeight +" (包括边线的宽)";
s += "/r/n网页正文全文宽:"+ document.body.scrollWidth;
s += "/r/n网页正文全文高:"+ document.body.scrollHeight;
s += "/r/n网页被卷去的高:"+ document.body.scrollTop;
s += "/r/n网页被卷去的左:"+ document.body.scrollLeft;
s += "/r/n网页正文部分上:"+ window.screenTop;
s += "/r/n网页正文部分左:"+ window.screenLeft;
s += "/r/n屏幕分辨率的高:"+ window.screen.height;
s += "/r/n屏幕分辨率的宽:"+ window.screen.width;
s += "/r/n屏幕可用 工作区高度:"+ window.screen.availHeight;
s += "/r/n屏幕可用工作区宽度:"+ window.screen.availWidth;
alert(s);
</SCRIPT>