在页面有三个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变大。有点不合逻辑。
需要继续优化;
}
分享到:
相关推荐
代码来源于我近期的一个项目,点击树形菜单右侧iframe链接的pdf出现变换
div实现iframe的框架左侧隐藏与显示实例;代码非常简单;分享给大家
自适度div高度,js获取元素位置和窗口高度,自动适应,也可以使用在父框是iframe,有完整的js实例
jQuery动态选项卡,包括Tabs中iframe的使用等实例。 适用于jquery的TabControl类动态创建选项卡【标签】,实例中用TabControl类创建了两人个实用的TAB,并加注了丰富的注释,这里要注意一下,第2个tab测试两个之间的...
关于iframe异步加载,我们常用的大都是左边菜单栏右边是内容页面,要求我们不能左边菜单不能刷新的情况下,异步加载右边的内容页面。 话不多说,做了一个实例大致是这样的: 1、首先在你的项目中建立三个文件如: 2...
本文实例讲述了asp.net中MVC借助Iframe实现无刷新上传文件的方法。分享给大家供大家参考。具体实现方法如下: html: 代码如下:<div id=”uploadwindow” xss=removed> <form action=”/ShopActivitys/...
一开始的需求只是表头部分在滚动时能一直固定在头部,那关键要实现的就是让tr能定位。 首先想到的方法是给tr设置relative,用ie6/7测试以下代码: Code <!DOCTYPE ...
本文实例讲述了js检测iframe是否加载完成的方法。分享给大家供大家参考,具体如下: 这里是继上一篇《js实现iframe框架取值的方法(兼容IE,firefox,chrome等)》的扩展应用: 应用场景:iframe个人感觉最独特的应用之一...
2.7 取得控件的绝对位置 2.8 删除时的确认提 示 2.9 按钮只能单击一次 2.10 防止按钮连击 2.11 图片式按钮 2.12 文字显示在按钮底部 2.13 选择不同的列表项就显示不同的按钮 2.14 使用按钮控制文本渐变 2.15 翻页...
本文实例讲述了javascript实现iframe框架延时加载的方法。分享给大家供大家参考。具体实现方法如下: 有的时候我们希望页面的一些东西实现延时加载,这样可以不影响网站打开速度,下面我来给大家介绍javascript实现...
iframe使用方法: 复制代码代码如下:<DIV align=center><IFRAME src=”” frameBorder=0 marginwidth=0 marginheight=0 scrolling=no style=”width168:...</DIV> 说明:这是一个嵌入含有天气预报的应用实例。这个
本文实例讲述了js实现iframe框架取值的方法。分享给大家供大家参考,具体如下: 为啥世上会有这么多不同的浏览器?每次遇到js/css的浏览器兼容性问题,总是要发出这样的感叹,真希望这些个浏览器公司全部倒下,然后...
摘要:脚本资源,Ajax/JavaScript,弹出层 收集的JAVAsCRIPT弹出DIV层窗口的实例,引入了jquery-1.4.1.min.js,实例中有一个无边框iframe完美遮罩演示。这些网页特效对于平时的前端设计用处非常大,学习之后也能提高你...
连接数据库代码实例 1,连接数据库代码 文件名称 conn.asp 所有访问数据库的文件都调用此文件<!--#include file=\"Conn.asp\"--> db=\"data/data.mdb\" \'数据库存放目录 on error resume next set conn=server...
2.7 取得控件的绝对位置 2.8 删除时的确认提示 2.9 按钮只能单击一次 2.10 防止按钮连击 2.11 图片式按钮 2.12 文字显示在按钮底部 2.13 选择不同的列表项就显示不同的按钮 2.14 使用按钮控制文本渐变 2.15 翻页效果...
第一就是比较有名的:一般div浮层在IE6下无法遮盖select元素的问题。首先提供了下面一个实例: 注解:如果你在FirFox下和IE7下看都 在html中关于select元素的问题在很多地方都提出过,而在前段时间的项目中,刚好...
jQuery funkyUI plugin 弹出div遮罩层效果插件,一看这名字您就明白,这是一个jquery插件类,这个实例包中有一个无边框iframe完美遮罩演示。这些网页特效对于平时的前端设计用处非常大,学习之后也能提高你的JS水平...
3.1 Frameset和iframe 4 3.2 Frameset和Div两种方式的对比 5 3.2.1 frameset布局的优点 5 3.2.2 frameset布局的缺点 5 3.2.3 DIV传统布局与frameset相比的优点 5 3.2.4 DIV传统布局与frameset相比的缺点与解决办法 6...
htmlDecode : "style,script,iframe|on*", emoji : true, taskList : true, tocm : true, // Using [TOCM] tex : true, // 开启科学公式TeX语言支持,默认关闭 flowChart : true, // 开启流程图支持,默认关闭...
UM的主要特点就是容量和加载速度上的改变,全版本的代码量为125k,而且放弃了使用传统的iframe模式,采用了div的加载方式,以达到更快的加载速度和零加载失败率。现在UM的第一个使用者是百度贴吧,贴吧每天几亿的pv...