首先 由于谷歌与opera浏览器的安全问题对iframe的操作需要服务器环境！所以以下文件都是运行在服务器环境下的。
<body>
<h3>下面是iframe</h3>
<iframe id="controller-father" name="controller-father" src="children-iframe.html" frameborder="1"></iframe>这个iframe的高度设置的js写在父页面里！
<iframe id="controller-children" src="father-iframe.html" frameborder="1"></iframe>这个iframe的高度设置的js写在子页面里！
<script type="text/javascript">
window.onload=function(){
var ifm=document.getElementById('controller-father');
var subWeb = document.frames ? document.frames["controller-father"].document : ifm.contentDocument;
//document.frames ? document.frames["controller-father"].document这个是兼容IE的； 其他用 ifm.contentDocument；
if(ifm != null && subWeb != null) {
ifm.style.height = subWeb.body.offsetHeight+50+'px';
// ifm.style.height = subWeb.body.scrollHeight+50+'px';这个两个设置高度的方法都能用;也可设置写为：ifm.height=...;这个就不用加 ‘px’单位了。
}
}
</script>
</body>
现在先设置一个看看效果！
ok！
下面进行在子页面里控制iframe的高度！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
</head>
<body>
<p>我是子页面,在父页面里控制它的iframe的高度</p>
<p>我是子页面,在父页面里控制它的iframe的高度</p>
<p>我是子页面,在父页面里控制它的iframe的高度</p>
<p>我是子页面,在父页面里控制它的iframe的高度</p>
<p>我是子页面,在父页面里控制它的iframe的高度</p>
<p>我是子页面,在父页面里控制它的iframe的高度</p>
<p>我是子页面,在父页面里控制它的iframe的高度</p>
<p>我是子页面,在父页面里控制它的iframe的高度</p>
<script type="text/javascript">
var ifm=window.parent.document.getElementById('controller-children');//在子页面里获取父页面的iframe元素
ifm.style.height=window.document.body.offsetHeight+50+'px';
</script>
</body>
</html>
效果图
iframe加载正常但是一片空白，html的posotion属性不能是relative