页面布局-iframe 高度 自适应问题

菜单 部分 为 父页面，点击之后使用iframe 引入 子页面，最初时 子页面高度 有误，故记录如何如何调整 高度的方法：

结构如下：

<!--主体内容-->
<div class="main" id ="rightMain" >
<iframe  frameborder="0" width="100%" height="100%" name="rightFrame" scrolling="no"id="rightFrame"></iframe>
</div>

一：在 父页面设置子页面高度 如下

1：加载时 自动设置高度（根据子页面内容-body）

// 设置高度  加载的过程中 设置
$('#rightFrame').load(function() {   
   var iframeHeight=$(this).contents().find("body").height();  
  // alert("height:"+iframeHeight);
   $(this).height(iframeHeight+'px');   
})

2：点击菜单后 再次设置

function changeSonSize(){

   var iframeHeight=$("#rightFrame").contents().find("body").height();  
  // alert("height:"+iframeHeight);
   $("#rightFrame").height(iframeHeight+'px');   

}

点击事件后调用：changeSonSize();

二：在子页面设置子页面高度

需要设置的原因是 可能在最初load 子页面时 已经设置了高度，但是 在子页面 操作部分功能后子页面的高度 发生变化，而这时由没有重新设置高度，所以 会发生页面 高度不和谐的现象，那么该如何解决呢？ 我给的方案有两个 1.给定 将要高度变化的容器一个高度，这样 在最初加载时就会设定，后面操作就不会改变容器高度；2.再操作完 改变容器高度 时，再重新设定一下子页面（当前页面）的高度，通过调用 父页面的方法即可：

// 改变 页面大小

function changeSize(){

window.parent.changeSonSize();
}

这样就会重新根据子页面内容高度，重新设定了。