DIV，iframe位置定位范例

DIV，iframe位置定位实例
  在页面有三个DIV topDIV，middleDIV，buttomDIV，其中middleDIV有个iframe
  呈现方式：
   1：topDIV 长度可变，不能有滚动条，而且完成呈现页面；
   2：buttomDIV 长度固定，当超过页面长度，自动呈现滚动条;
   3: middleDIV 随着topDIV 和buttomDIV长度伸长而缩小，
      当超过页面长度，自动呈现滚动条;

<div id="topDIV" style="z-index: 1400; position: absolute;width:100%;height:100%;height:auto;height:auto; overflow: left;left:0;top:0;background-color:transient">

</div>


<div id="middleDIV" style="z-index: 1400;position: absolute; absolute;width:100%;overflow: left;left:4;right:0;background-color:transient">

<iframe src="" id="mainFrame" frameborder="0" scrolling="auto"  width="100%"  style="border:solid 1px #56BFEC;"></iframe>
</div>

<div id="buttomDIV" style="z-index: 1400;height:123px; position: absolute;width:100%; overflow:auto;left:4;right:0;top:80%;background-color:transient">

</div>

在开发需要解决问题：
   function setDivSize(){
document.getElementById("middleDIV").style.top=document.getElementById("topDIV").offsetHeight+15+"px";//动态放置middleDIV的顶部
document.getElementById("middleDIV").style.height=document.getElementById("topDIV").offsetHeight+10+"px";//
document.getElementById("mainFrame").height=(window.document.body.scrollHeight-document.getElementById("topDIV").offsetHeight-document.getElementById("buttomDIV").offsetHeight-40);//iframe 等于总长度减去topDIV和buttomDIV长度，这是利用iframe将middleDIV变大。有点不合逻辑。
需要继续优化;


}