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变大。有点不合逻辑。
需要继续优化;


}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值