通过JavaScript获取页面大小
一、使用document对象的属性设置网页窗口的大小：
网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth
示例代码１：
View Code 
<!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><meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<table width="200" height="1500" border="1" bgcolor="#ccc">
<tr>
<td>此表格高度1500</td>
</tr>
</table>
<script language="javascript">
var s = '网页可见区域宽(clientWidth)：'+ document.body.clientWidth;
s += '\r\n网页可见区域高(clientHeight)：'+ document.body.clientHeight;
s += '\r\n网页可见区域高(clientHeight)：'+ document.body.clientHeight +' (包括边线的宽)';
s += '\r\n网页可见区域高(clientHeight)：'+ document.body.clientHeight +' (包括边线的宽)';
s += '\r\n网页正文全文宽(clientHeight)：'+ document.body.clientHeight;
s += '\r\n网页正文全文高(clientHeight)：'+ document.body.clientHeight;
s += '\r\n网页被卷去的高(scrollTop)：'+ document.body.scrollTop;
s += '\r\n网页被卷去的左(scrollLeft)：'+ document.body.scrollLeft;
s += '\r\n网页正文部分上(screenTop)：'+ window.screenTop;
s += '\r\n网页正文部分左(screenLeft)：'+ window.screenLeft;
s += '\r\n屏幕分辨率的高(height)：'+ window.screen.height;
s += '\r\n屏幕分辨率的宽(width)：'+ window.screen.width;
s += '\r\n屏幕可用工作区高度(availHeight)：'+ window.screen.availHeight;
s += '\r\n屏幕可用工作区宽度(availWidth)：'+ window.screen.availWidth;
alert(s);
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<table width="200" height="1500" border="1" bgcolor="#ccc">
<tr>
<td>此表格高度1500</td>
</tr>
</table>
<script language="javascript">
var s = '网页可见区域宽(clientWidth)：'+ document.body.clientWidth;
s += '\r\n网页可见区域高(clientHeight)：'+ document.body.clientHeight;
s += '\r\n网页可见区域高(clientHeight)：'+ document.body.clientHeight +' (包括边线的宽)';
s += '\r\n网页可见区域高(clientHeight)：'+ document.body.clientHeight +' (包括边线的宽)';
s += '\r\n网页正文全文宽(clientHeight)：'+ document.body.clientHeight;
s += '\r\n网页正文全文高(clientHeight)：'+ document.body.clientHeight;
s += '\r\n网页被卷去的高(scrollTop)：'+ document.body.scrollTop;
s += '\r\n网页被卷去的左(scrollLeft)：'+ document.body.scrollLeft;
s += '\r\n网页正文部分上(screenTop)：'+ window.screenTop;
s += '\r\n网页正文部分左(screenLeft)：'+ window.screenLeft;
s += '\r\n屏幕分辨率的高(height)：'+ window.screen.height;
s += '\r\n屏幕分辨率的宽(width)：'+ window.screen.width;
s += '\r\n屏幕可用工作区高度(availHeight)：'+ window.screen.availHeight;
s += '\r\n屏幕可用工作区宽度(availWidth)：'+ window.screen.availWidth;
alert(s);
</script>
</body>
</html>
在IE、FireFox、Netscape等不同的浏览器里，对于document.body 的 clientHeight、offsetHeight 和 scrollHeight 有着不同的含义，比较容易搞混，现整理一下相关的内容：
clientHeight：在上述浏览器中, clientHeight 的含义是一致的，定义为网页内容可视区域的高度，即在浏览器中可以看到网页内容的高度，通常是工具条以下到状态栏以上的整个区域高度，与具体的网页页面内容无关。可以理解为，在屏幕上通过浏览器窗口所能看到网页内容的高度。
offsetHeight：关于offsetHeight，ie和firefox等不同浏览中意义有所不同，需要加以区别。在ie中，offsetHeight 的取值为 clientHeight加上滚动条及边框的高度；而firefox、netscape中，其取值为是实际网页内容的高度，可能会小于clientHeight。
scrollHeight：scrollHeight都表示浏览器中网页内容的高度，但稍有区别。在ie里为实际网页内容的高度，可以小于 clientHeight；在firefox 中为网页内容高度，最小值等于 clientHeight，即网页实际内容比clientHeight时，取clientHeight。
clientWidth、offsetWidth 和 scrollWidth 的含义与上述内容雷同，不过是高度变成宽度而已。
若希望clientHeight、offsetHeight和scrollHeight三个属性能取值一致的话，可以通过设置DOCTYPE，启用不同的解析器，如：<!DOCTYPE HTML PUBLIC "DTD XHTML 1.0 Transitional">，设置DOCTYPE后，这三个属性都表示实际网页内容的高度。
clientHeight：在上述浏览器中, clientHeight 的含义是一致的，定义为网页内容可视区域的高度，即在浏览器中可以看到网页内容的高度，通常是工具条以下到状态栏以上的整个区域高度，与具体的网页页面内容无关。可以理解为，在屏幕上通过浏览器窗口所能看到网页内容的高度。
offsetHeight：关于offsetHeight，ie和firefox等不同浏览中意义有所不同，需要加以区别。在ie中，offsetHeight 的取值为 clientHeight加上滚动条及边框的高度；而firefox、netscape中，其取值为是实际网页内容的高度，可能会小于clientHeight。
scrollHeight：scrollHeight都表示浏览器中网页内容的高度，但稍有区别。在ie里为实际网页内容的高度，可以小于 clientHeight；在firefox 中为网页内容高度，最小值等于 clientHeight，即网页实际内容比clientHeight时，取clientHeight。
clientWidth、offsetWidth 和 scrollWidth 的含义与上述内容雷同，不过是高度变成宽度而已。
若希望clientHeight、offsetHeight和scrollHeight三个属性能取值一致的话，可以通过设置DOCTYPE，启用不同的解析器，如：<!DOCTYPE HTML PUBLIC "DTD XHTML 1.0 Transitional">，设置DOCTYPE后，这三个属性都表示实际网页内容的高度。
示例代码2：
<!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>浏览器窗口大小</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312"></meta>
</head>
<body>
<h2 align="center">浏览器窗口大小</h2><hr />
<form action="#" method="get" name="form1" id="form1">
<!--显示浏览器窗口的实际尺寸-->
clientHeight的值为: <input type="text" name="clientHeight" size="4"/><br />
offsetHeight的值为: <input type="text" name="offsetHeight" size="4"/><br />
scrollHeight的值为：<input type="text" name="scrollHeight" size="4"/><br />
</form>
<script type='text/javascript'>
window.onload = function()
{
var ch = document.body.clientHeight;
var sh = document.body.offsetHeight;
var ssh = document.body.scrollHeight;
//结果输出
document.form1.clientHeight.value= ch;
document.form1.offsetHeight.value= sh;
document.form1.scrollHeight.value= ssh;
}
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>浏览器窗口大小</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312"></meta>
</head>
<body>
<h2 align="center">浏览器窗口大小</h2><hr />
<form action="#" method="get" name="form1" id="form1">
<!--显示浏览器窗口的实际尺寸-->
clientHeight的值为: <input type="text" name="clientHeight" size="4"/><br />
offsetHeight的值为: <input type="text" name="offsetHeight" size="4"/><br />
scrollHeight的值为：<input type="text" name="scrollHeight" size="4"/><br />
</form>
<script type='text/javascript'>
window.onload = function()
{
var ch = document.body.clientHeight;
var sh = document.body.offsetHeight;
var ssh = document.body.scrollHeight;
//结果输出
document.form1.clientHeight.value= ch;
document.form1.offsetHeight.value= sh;
document.form1.scrollHeight.value= ssh;
}
</script>
</body>
</html>
示例代码3：
<!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>请调整浏览器窗口</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312"></meta>
</head>
<body>
<h2 align="center">请调整浏览器窗口大小</h2><hr />
<form action="#" method="get" name="form1" id="form1">
<!--显示浏览器窗口的实际尺寸-->
浏览器窗口的实际高度: <input type="text" name="availHeight" size="4"/><br />
浏览器窗口的实际宽度: <input type="text" name="availWidth" size="4"/><br />
</form>
<script type="text/javascript">
<!--
var winWidth = 0;
var winHeight = 0;
function findDimensions() //函数：获取尺寸
{
//获取窗口宽度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//通过深入Document内部对body进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//结果输出至两个文本框
document.form1.availHeight.value= winHeight;
document.form1.availWidth.value= winWidth;
}
findDimensions();
//调用函数，获取数值
window.onresize=findDimensions;
//-->
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>请调整浏览器窗口</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312"></meta>
</head>
<body>
<h2 align="center">请调整浏览器窗口大小</h2><hr />
<form action="#" method="get" name="form1" id="form1">
<!--显示浏览器窗口的实际尺寸-->
浏览器窗口的实际高度: <input type="text" name="availHeight" size="4"/><br />
浏览器窗口的实际宽度: <input type="text" name="availWidth" size="4"/><br />
</form>
<script type="text/javascript">
<!--
var winWidth = 0;
var winHeight = 0;
function findDimensions() //函数：获取尺寸
{
//获取窗口宽度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//通过深入Document内部对body进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//结果输出至两个文本框
document.form1.availHeight.value= winHeight;
document.form1.availWidth.value= winWidth;
}
findDimensions();
//调用函数，获取数值
window.onresize=findDimensions;
//-->
</script>
</body>
</html>
二、框架页中的高度自适应：
在实际使用iframe的过程中，会遇到iframe高度的问题。由于被嵌套的页面大小不固定而出现滚动条。采用JavaScript来控制iframe元素的高度，让iframe高度自适应。另外，由于JavaScript对不同域名下权限的控制，会遇到同域、跨域的情况。
１、同域下的Iframe高度自适应
控制id为“iframeid”的iframe的高度，通过JavaScript取得被嵌套页面最终高度，然后在主页面进行设置来实现。
控制id为“iframeid”的iframe的高度，通过JavaScript取得被嵌套页面最终高度，然后在主页面进行设置来实现。
<script type="text/javascript">
function SetCwinHeight()
{
var iframeid=document.getElementById("iframeid"); //iframe id
if (document.getElementById)
{
if (iframeid && !window.opera)
{
if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight){
iframeid.height = iframeid.contentDocument.body.offsetHeight;
}
else if(iframeid.Document && iframeid.Document.body.scrollHeight)
{
iframeid.height = iframeid.Document.body.scrollHeight;
}
}
}
}
</script>
function SetCwinHeight()
{
var iframeid=document.getElementById("iframeid"); //iframe id
if (document.getElementById)
{
if (iframeid && !window.opera)
{
if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight){
iframeid.height = iframeid.contentDocument.body.offsetHeight;
}
else if(iframeid.Document && iframeid.Document.body.scrollHeight)
{
iframeid.height = iframeid.Document.body.scrollHeight;
}
}
}
}
</script>
页面框架代码：
<iframe width="100%" id="iframeid" onload="Javascript:SetCwinHeight()" height="1" frameborder="0" src="demo.html"></iframe>
2、不同域下的Iframe高度自适应
主页面与被嵌套页面不同域时，涉及到权限问题，要规避JavaScript的跨域限制。
具体操作，可参考以下资料中的实验性实例代码，可行性有待考证。
参考：①.JS获取浏览器窗口大小 获取屏幕，浏览器，网页高度宽度(http://hi.baidu.com/liuleihai/blog/item/d7f18182bb817d97f703a60a.html)
②.Iframe高度自适应(http://www.ccvita.com/376.html)
③.关于iframe页面高度自适应的问题(http://www.cnblogs.com/sirzxj/archive/2012/04/28/2475249.html)
