`

DIV,iframe位置定位实例

    博客分类:
  • HTML
 
阅读更多
  在页面有三个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变大。有点不合逻辑。
需要继续优化;


}
分享到:
评论

相关推荐

    jquery树形菜单+iframe显示实例

    代码来源于我近期的一个项目,点击树形菜单右侧iframe链接的pdf出现变换

    div左侧显示和隐藏

    div实现iframe的框架左侧隐藏与显示实例;代码非常简单;分享给大家

    自适度div高度

    自适度div高度,js获取元素位置和窗口高度,自动适应,也可以使用在父框是iframe,有完整的js实例

    jQuery动态选项卡,包括Tabs中iframe的使用等实例.rar

    jQuery动态选项卡,包括Tabs中iframe的使用等实例。 适用于jquery的TabControl类动态创建选项卡【标签】,实例中用TabControl类创建了两人个实用的TAB,并加注了丰富的注释,这里要注意一下,第2个tab测试两个之间的...

    iframe异步加载实现点击左边菜单加载右边内容实例讲解

    关于iframe异步加载,我们常用的大都是左边菜单栏右边是内容页面,要求我们不能左边菜单不能刷新的情况下,异步加载右边的内容页面。 话不多说,做了一个实例大致是这样的: 1、首先在你的项目中建立三个文件如: 2...

    asp.net中MVC借助Iframe实现无刷新上传文件实例

    本文实例讲述了asp.net中MVC借助Iframe实现无刷新上传文件的方法。分享给大家供大家参考。具体实现方法如下: html: 代码如下:&lt;div id=”uploadwindow” xss=removed&gt;  &lt;form action=”/ShopActivitys/...

    JavaScript Table行定位效果

    一开始的需求只是表头部分在滚动时能一直固定在头部,那关键要实现的就是让tr能定位。 首先想到的方法是给tr设置relative,用ie6/7测试以下代码: Code &lt;!DOCTYPE ...

    js检测iframe是否加载完成的方法

    本文实例讲述了js检测iframe是否加载完成的方法。分享给大家供大家参考,具体如下: 这里是继上一篇《js实现iframe框架取值的方法(兼容IE,firefox,chrome等)》的扩展应用: 应用场景:iframe个人感觉最独特的应用之一...

    程序天下:JavaScript实例自学手册

    2.7 取得控件的绝对位置 2.8 删除时的确认提 示 2.9 按钮只能单击一次 2.10 防止按钮连击 2.11 图片式按钮 2.12 文字显示在按钮底部 2.13 选择不同的列表项就显示不同的按钮 2.14 使用按钮控制文本渐变 2.15 翻页...

    javascript实现iframe框架延时加载的方法

    本文实例讲述了javascript实现iframe框架延时加载的方法。分享给大家供大家参考。具体实现方法如下: 有的时候我们希望页面的一些东西实现延时加载,这样可以不影响网站打开速度,下面我来给大家介绍javascript实现...

    使用iframe在网页中嵌入其他网页的方法

    iframe使用方法: 复制代码代码如下:&lt;DIV align=center&gt;&lt;IFRAME src=”” frameBorder=0 marginwidth=0 marginheight=0 scrolling=no style=”width168:...&lt;/DIV&gt; 说明:这是一个嵌入含有天气预报的应用实例。这个

    js实现iframe框架取值的方法(兼容IE,firefox,chrome等)

    本文实例讲述了js实现iframe框架取值的方法。分享给大家供大家参考,具体如下: 为啥世上会有这么多不同的浏览器?每次遇到js/css的浏览器兼容性问题,总是要发出这样的感叹,真希望这些个浏览器公司全部倒下,然后...

    Js弹出div窗口完美版

    摘要:脚本资源,Ajax/JavaScript,弹出层 收集的JAVAsCRIPT弹出DIV层窗口的实例,引入了jquery-1.4.1.min.js,实例中有一个无边框iframe完美遮罩演示。这些网页特效对于平时的前端设计用处非常大,学习之后也能提高你...

    asp连接数据库代码实例

    连接数据库代码实例 1,连接数据库代码 文件名称 conn.asp 所有访问数据库的文件都调用此文件&lt;!--#include file=\"Conn.asp\"--&gt; db=\"data/data.mdb\" \'数据库存放目录 on error resume next set conn=server...

    《程序天下:JavaScript实例自学手册》光盘源码

    2.7 取得控件的绝对位置 2.8 删除时的确认提示 2.9 按钮只能单击一次 2.10 防止按钮连击 2.11 图片式按钮 2.12 文字显示在按钮底部 2.13 选择不同的列表项就显示不同的按钮 2.14 使用按钮控制文本渐变 2.15 翻页效果...

    select网页下拉列表与div层遮盖问题

    第一就是比较有名的:一般div浮层在IE6下无法遮盖select元素的问题。首先提供了下面一个实例: 注解:如果你在FirFox下和IE7下看都 在html中关于select元素的问题在很多地方都提出过,而在前段时间的项目中,刚好...

    jQuery funkyUI plugin 弹出div遮罩层效果插件.rar

    jQuery funkyUI plugin 弹出div遮罩层效果插件,一看这名字您就明白,这是一个jquery插件类,这个实例包中有一个无边框iframe完美遮罩演示。这些网页特效对于平时的前端设计用处非常大,学习之后也能提高你的JS水平...

    Web应用前端技术的探索与实践

    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...

    Markdown在线编辑器

    htmlDecode : "style,script,iframe|on*", emoji : true, taskList : true, tocm : true, // Using [TOCM] tex : true, // 开启科学公式TeX语言支持,默认关闭 flowChart : true, // 开启流程图支持,默认关闭...

    MiniUEditorDotNet控件专版源码 v1.0

    UM的主要特点就是容量和加载速度上的改变,全版本的代码量为125k,而且放弃了使用传统的iframe模式,采用了div的加载方式,以达到更快的加载速度和零加载失败率。现在UM的第一个使用者是百度贴吧,贴吧每天几亿的pv...

Global site tag (gtag.js) - Google Analytics