`

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


}
分享到:
评论

相关推荐

    Div iFrame 做的面向对象小窗口

    - 使用 `div` 可以创建逻辑上的区块,帮助实现页面的分块和布局,便于内容的管理和定位。 - `Div` 可以通过 `class` 或 `id` 属性进行选择和操作,方便用CSS或JavaScript进行样式设置和动态行为添加。 2. **...

    可爱的iframe+div

    这很可能是博主为了展示iframe和div结合使用的实例。通过打开并查看这个文件,我们可以看到实际的HTML代码结构,以及iframe是如何嵌入到div中的。这为我们提供了学习和模仿的实例,有助于理解如何在自己的项目中应用...

    jquery树形菜单+iframe显示实例

    本示例“jquery树形菜单+iframe显示实例”是将jQuery技术与树形菜单和iframe结合,实现了一个交互式的网页布局。在这样的应用中,用户可以通过点击树形菜单来触发iframe中的内容更新,例如打开一个PDF文件。 首先,...

    iframe使用实例

    在"WebSite1"这个压缩包文件中,可能包含了使用`iframe`的一个简单实例。可能的代码结构如下: ```html &lt;!DOCTYPE html&gt; &lt;title&gt;iframe使用示例 使用iframe加载外部页面 &lt;iframe src=...

    iframe 自适应 实例

    本实例主要探讨的是如何使`iframe`自适应其容器,以确保在不同屏幕尺寸和设备上保持良好的显示效果。 1. **`iframe`基本语法**: `iframe`标签的基本结构如下: ``` &lt;iframe src=...

    javascript写的可拖动的iframe

    这个类可能包含初始化方法、事件监听器(如`mousedown`、`mousemove`和`mouseup`)以及更新iframe位置的函数。例如: ```javascript class DraggableIframe { constructor(iframe) { this.iframe = iframe; this...

    flex-iframe-1.4.1.zip

    然后,在项目中引入库文件,并根据需要配置选项,创建和管理iframe实例。例如,可以使用以下HTML和JavaScript代码创建一个动态加载的iframe: ```html &lt;!DOCTYPE html&gt; &lt;script src="path/to/flex-iframe.min.js...

    div左侧显示和隐藏

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

    同域jQuery(跨)iframe操作DOM(实例讲解)

    本文主要讲解了在同域环境下使用jQuery进行跨iframe操作DOM的实例。iframe是一种在网页中嵌入另一个网页的HTML标签,它允许一个页面内嵌套另一个独立的页面。这种技术在很多情况下被广泛使用,例如在实现上传功能、...

    自适度div高度

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

    vue 页面tabs切换,替换iframe

    `keep-alive`组件是Vue的核心功能之一,它可以缓存组件实例,避免重复渲染和初始化。当我们切换回已经访问过的Tab时,`keep-alive`可以保持之前的状态,提高用户体验。但是,如果所有Tab都希望被缓存,那么`keep-...

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

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

    jquey弹出层背景置灰不能操作实例

    这需要使用`mousedown`、`mousemove`和`mouseup`事件,以及计算和设置新的div位置的逻辑。 6. **iframe 使用**:在`iframe.html`文件中,可能包含了一个嵌入在弹出层中的独立网页内容。通过iframe,我们可以将任意...

    div转png.zip

    在提供的"div转png.zip"压缩包中,包含了一个名为"1.html"的文件,这是个演示如何使用`html2canvas`将`div`转换为PNG的实例。当你解压缩并使用浏览器打开此HTML文件时,可以看到一个可视化的`div`层。这个`div`可能...

    JS打开关闭移动层动画实例

    - 如果不存在合适的`iframe`,则创建一个新的`iframe`,设置其位置、大小等属性,并将其添加到目标div元素的父节点中。 ##### 3. 获取最大宽度和高度 - 通过`getAttribute`和自定义`getStyle`函数获取div的最大宽度...

    thickbox3.1实例

    在“thickbox3.1实例”中,我们将深入探讨这个插件的功能、用法以及如何在项目中实现它。 首先,Thickbox的核心功能是提供一种优雅的方式来展示多媒体内容,无需离开当前页面。它利用CSS和JavaScript技术,使得弹出...

    百度地图(webapi)移动地图,根据中心点定位

    这段代码会在一个名为"container"的div元素中创建一个新的地图实例,并将地图中心设置为给定点,缩放级别为15级,即大致显示周围15公里的范围。 接下来,"拖动地图"功能让用户能够自由浏览地图。百度地图Web API...

    jQuery控制iFrame(实例代码)

    在这个实例中,我们关注的是如何使用jQuery来控制iFrame,即在网页中嵌入的另一个页面。iFrame(Inline Frame)常用于在同一个页面内展示多个独立的网页内容。 1. **在父窗口中操作iFrame** 要在父窗口中访问和...

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

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

Global site tag (gtag.js) - Google Analytics