在实际的项目进行中，很多地方可能由于历史原因不得不去使用 ，包括目前正火热的应用开发也是如此。
随之而来的就是在实际使用 中，会遇到 高度的问题，由于被嵌套的页面长度不固定而显示出来的滚动条，不仅影响美观，还会对用户操作带来不便。于是自动调整 的高度就成为本文的重点。
采用 来控制 元素的高度是 高度自适应的关键，同时由于 对不同域名下权限的控制，引发出同域、跨域两种情况。
同域时 高度自适应
下面的代码兼容IE/Firefox浏览器，控制id为“ id”的 的高度，通过 取得被嵌套页面最终高度，然后在主页面进行设置来实现。
代码如下，可复制。另外，请注意此解决方案仅供同域名下使用。
< type=\"text/ \">
function SetCwinHeight(){
var id=document.getElementById(\" id\"); // id
if (document.getElementById){
if ( id && !window.opera){
if ( id.contentDocument && id.contentDocument.body.offsetHeight){
id.height = id.contentDocument.body.offsetHeight;
}else if( id.Document && id.Document.body.scrollHeight){
id.height = id.Document.body.scrollHeight;
}
}
}
}
</ >
< width=\"100%\" id=\" id\" =\" :SetCwinHeight()\" height=\"1\" border=\"0\" src=\"kimi.php\"></ >
跨域时 高度自适应
在主页面和被嵌套的 为不同域名的时候，就稍微麻烦一些，需要避开 的跨域限制。
原理：现有 主页面main.html、被 嵌套页面 .html、 中介页面agent.html三个，通过main.html（域名为http://www.manongjc.com）嵌套 .html（域名为：http://www.phpq.net），当用户浏览时执行 .html中的 代码设置 C的scr地址中加入 页面的高度，agent.html（域名为：http://www.manongjc.com）取得传递的高度，通过 设置main.html中 的高度。最终实现预期的目标。
主页面main.html
< !DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html ns=\"http://www.w3.org/1999/xhtml\">
<head>< > 主页面</ ></head>
<body>
<div style=\"border:1px solid #ccc;padding:10px;\">< id=\" _content\" name=\" _content\" src=\" .html\" width=\"100%\" height=\"0\" scrolling=\"no\" border=\"0\"></ ></div><br />尾部<br /></body>
</html>
<##ads_in_article_manong##>
嵌套页面 .html
< !DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html ns=\"http://www.w3.org/1999/xhtml\">
<head>< >被 嵌套页面</ ></head>
<body>
文字<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 />< id=\" C\" name=\" C\" src=\"\" width=\"0\" height=\"0\" style=\"display:none;\" ></ >
< type=\"text/ \">
function sethash(){
hashH = document.documentElement.scrollHeight;
urlC = \"agent.html\";
document.getElementById(\" C\").src=urlC+\"#\"+hashH;
}
window. =sethash;
</ >
</body>
</html>
中介页面agent.html
< !DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html ns=\"http://www.w3.org/1999/xhtml\">
<head>< > 中介页面</ ></head>
<body>
< >
function pseth() {
var iObj = parent.parent.document.getElementById(\' _content\');
iObjH = parent.parent. s[\" _content\"]. s[\" C\"].location.hash;
iObj.style.height = iObjH.split(\"#\")[1]+\"px\";
}
pseth();
</ >
</body>
</html>
UPDATE：长期以来一直有网友说方案不能跨域，今天我重新又测试了下，确定在IE6、IE7、IE8、IE9、Firefox全系列、Chrome全系列均可以成功跨域控制高度。请注意以下要点
- 第一，修改main.html文件中 的src地址为需要跨域的域名（比如manongjc.sinaapp.com）
- 第二，修改 .html文件中的urlC值为源域名（比如www.manongjc.com）这点最重要
继续阅读与本文标签相同的文章
上一篇 :
中国蝴蝶刮出的全球风暴
下一篇 :
「软件定义汽车」？听听英特尔和一汽是怎么说的
-
辉煌的背后，华为何时补齐短板？任正非给出新目标
2026-05-14栏目： 教程
-
全球首条“5G自动微公交”示范线路乌镇开通
2026-05-14栏目： 教程
-
未来十年，最为吃香的4个大学专业，毕业后就是香饽饽！
2026-05-14栏目： 教程
-
还不会制作填充地图，试试这种方法，2分钟搞定，让你秒变大神
2026-05-14栏目： 教程
-
顺丰自研机器人惊艳亮相，化身“快递小哥”亮绝活，盯上万亿市场
2026-05-14栏目： 教程