iframe多级嵌套后，无论子iframe内部内容高度是否超过iframe，父级iframe都会出现滚动条的问题...

最新推荐文章于 2024-08-09 14:48:09 发布
最新推荐文章于 2024-08-09 14:48:09 发布
阅读量1.1k 收藏 2
点赞数
文章标签： xhtml python
原文链接：https://my.oschina.net/u/1460994/blog/756395
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

最近在项目项目中发现了一个问题，其实这个问题以前碰到过多次，只是一直没有找到原因，今天特意做一下记录。

代码如下：

<iframe id="mainFrame" name="mainFrame" src="" style="overflow:visible;" scrolling="yes" frameborder="no" width="100%" height="650">
        <div id="left">
			<iframe id="cmsMenuFrame" name="cmsMenuFrame" src="${ctx}/cms/tree" style="overflow:visible;"
				scrolling="yes" frameborder="no" width="100%"></iframe>
		</div>
		<div id="openClose" class="close">&nbsp;</div>
		<div id="right">
			<iframe id="cmsMainFrame" name="cmsMainFrame" src="${ctx}/cms/none" style="overflow:visible;"scrolling="yes" frameborder="no" width="100%"></iframe>
		</div>
</iframe>

当我设置这些iframe height:100%的时候，第一个iframe总是会出现滚动条；

随后我发现iframe的父级容器div总是会比iframe大5px。

如果要解决问题的话，可以在父级div中设置高度，但是如果父级div还有div嵌套的话，这样层层设置就很冗余了。

随后在网上寻找解决方案，div包裹的iframe有5px的高度差问题

 

2016年10月13日更新:

这个问题产生的原因是什么呢？

网上说html规范导致的，如果是

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

这样是没问题的。

而使用html5标签

<!DOCTYPE html>
<html>

就会相差几个像素；

其实不一定就是5个像素，相差的像素取决于行内高度。

为什么这么说呢？因为上面的原因并不是导致这样问题的真正根源。

真正的原因是iframe在html5中的是一个行内样式（display: inline），虽然并没有写出来，但是表现出来的就是一个行内样式。

这也是为什么给iframe设置dispaly:block;或者vertical-align:bottom或者给外层div设置font-size:0就可以让空白空间消失了。img和外层div也有这个问题，也可以这样解决。

感谢张鑫旭大牛的文章，让我明白了这个问题。推荐他的文章：

CSS深入理解vertical-align和line-height的基友关系

转载于:https://my.oschina.net/u/1460994/blog/756395

weixin_33713350
关注
web前端笔试题-完善版
JackieDYH的博客
08-08 1万+
web面试题 1、定位有哪几种？分别简述其特点。 static：默认值，没有定位，元素出现在正常的文档流中 relative：生成相对定位的元素，不脱离文档流，相对于自身位置进行定位 absolute：生成绝对定位的元素，脱离文档流，相对于最近一级的定位，而不是static的父元素来进行定位 fixed：生成绝对定位元素（老IE不支持），脱离文档流，相对于浏览器窗口进行定位 2、请描述一下网页从开始请求到最终显示的完整过程 1.1在浏览器中输入地址 1.2发送到DNS服务器，解析获取域名对应的web服务器
嵌套的iframe和frameset中，鼠标中键滚动页面时，页面不会随之滚动，且滚动条也没有反应？
TdMaster的博客
10-06 1302
然而，如果在这些嵌套的框架中使用鼠标中键滚动页面时，可能会遇到页面不滚动且滚动条没有响应的问题。当我们在一个框架中嵌套另一个框架时，鼠标滚动事件可能会被最外层的框架所捕获，而不是被嵌套的框架所处理。通过这种方式，我们可以将鼠标滚动事件传递给嵌套的框架，并在嵌套的框架中实现滚动效果。这样，当我们在嵌套的框架中使用鼠标中键滚动页面时，页面将正确滚动且滚动条也会有相应的反应。在嵌套的框架中，我们添加了另一个事件监听器来接收从父级框架发送的消息，并处理滚动事件。// 将鼠标滚动事件传递给嵌套的框架。
解决多个iframe嵌套而造成的多个滚动条问题
w36680130的博客
06-13 632
解决多个iframe嵌套而造成的多个滚动条问题
FLUX | 完美解决AI画手困难，英文文字渲染与复杂提示精确直出！
最新发布
小王的储物间
08-09 1179
两者较显著的区别在于：FLUX.1引入了一种叫DoubleStreamBlock的结构，具体来说在前几层layer中，采用了txt和img embedding独立过各自的transformer块，然后再拼到一起过统一的transformer块，有人推测这是为了进一步对齐图像和文本特征，但是这部分还没有更具体的技术报告。当我学到一定基础，有自己的理解能力的时候，会去阅读一些前辈整理的书籍或者手写的笔记资料，这些笔记详细记载了他们对一些技术点的理解，这些理解是比较独到，可以学到不一样的思路。
iframe嵌套页面，无法获取外部浏览器滚动条高度
weixin_47067468的博客
06-09 428
iframe嵌套页面获取外部浏览器高度
记一次safari下iframe被内容撑开，无法滚动
A13330069275的博客
05-15 879
iframe在safari上滚动条失效 　　主要原因是由于iframe设定了一定的高度之后，由于iframe内容的足够长超过了iframe的设定高度时，在iPhone上滚动条没效。 　　而解决办法也比较简单，就是给iframe设定一个外层div，并设定外层div的样式： -webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 ...
页面内嵌入iframe出现滚动条
drawlessonsfrom的博客
06-17 5670
一、问题出现原因 iframe可以在原有的页面中嵌入一个新的页面，在所嵌入的新的页面中会出现相关的滚动条。 二、问题解决方案 直接控制iframe框架，使其不能出现滚动条。具体相关的代码如下所示： <iframe :src="srcUrl" frameborder="0" scrolling="no"></iframe> 以上相关的关键代码为： frameborder="0" scrolling="no" ...
多层嵌入式框架（iframe）使用总结
zhilunchen的专栏
09-22 3842
    在Web开发过程中，为了提高页面架构层次的清晰性和灵活性，应对复杂的页面布局，使用嵌入式框架iframe可能是最有效的解决办法。如果布局比较复杂或页面层次较多，则可能会用到嵌套多层的iframe，然而iframe并不会根据页面高度自动调整自身高度，为了屏蔽滚动条提高视觉效果，就需要使用javascript代码使iframe自动调整高度。    1、单层情况，假设在A.aspx页面的某个
web入门实验 含滚动公告、下拉菜单等
05-10
首先，滚动公告栏是一种常见于网站顶部或侧边栏的信息展示工具，它能够滚动播放多条公告或新闻，有效地利用有限的空间展示更多的内容。实现滚动公告栏通常需要HTML和CSS来布局及样式化，同时配合JavaScript或者...
前端2020面试题195道
weijieyuhyt的博客
01-13 1万+
HTML5面试题 一、 Doctype的作用? 严格模式和混杂模式的区分，以及如何触发这2种模式? <!DOCTYPE> 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。 DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。 严格模式就是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法， 混杂模式...
vue运用之el-cascader组件
日常笔记/总结/系列知识梳理
11-30 1003
el-cascader 是 Element UI 的级联选择器组件。以下是一些常见的 el-cascader 问题以及对应的案例代码。
iframe内容高度 iframe自适应高度终极解决Iframe设置高度后无法缩小问题
06-03
Iframe自动根据类容改变自己的大小，解决Iframe设置高度后无法缩小！拜一个高人所赐，特表示感谢！
多个iframe，其中一个的div能够处于最上层显示
10-24
多个iframe，其中一个frame中的隐藏div能够在最上层显示，不会挡着这个div
ifram高度为父元素100%后出滚动条
zhengzhongz的博客
01-10 623
由于 iframe 默认是 inline 元素，默认它会放在基线之上，而基线之下还有一定高度（即 descender 部分）所以它会溢出了。设置ifram宽高为父元素的100%，边框为0，因此，我们需要设置 iframe 的样式为。
父页面使用iframe嵌子页面时使子页面弹框适应父页面滚动像素
qq_34420739的博客
03-11 500
使用el-dialog的top属性 当滚动条拖动过iframe之前的区域高度时，dialog的top值设置为滚动条像素值-区域高度的值 x=父页面高度=parent.document.body.offsetHeight y=滚动条像素高度=parent.window.pageYOffset b=子页面高度=document.body.offsetHeight=(这里等于1108) a=A区域高度=x-b 即dialog的top属性设置为：(y-a+80>0)?(y-a+80):80 （感觉设置80更
iframe内容适应div大小_解决Object标签播放VLC视频层级太高，叠加不上内容的问题...
weixin_39589241的博客
11-26 630
先上效果图：因为iframe的层级比object的药高，可以把要显示的内容部分加上iframe <div> <object> ...... // 我们的视频内容 </object> </div> <div class="contText"> <iframe...
关于层级很深的iframe用jquery获取最顶级的元素，超简单
热门推荐
d945332077的专栏
08-01 1万+
$("#顶级框架的id",top.window.document).html()--得到其中的html。哈哈---初学者总是这么容易满足嘿嘿。
layer.open 使用中弹出页面需要比父级大。
java_study_的博客
06-17 2640
问题 在layer.open 使用中弹出页面需要比父级大。 1 、 使用 layer.open layer.open({ type: 2, shadeClose : true, shade : 0.4, zIndex:window.top.layer.zIndex, content: encodeURI("../serviceRequestType/toForm?tplTypeId=2"), title: "模板列表", area: ['90%', '60
iframe的下拉菜单
u013214707的专栏
01-03 3368
Demo页面：主页面 iframe_a.html ，被包含页面 iframe_b.htm 和 iframe_c.html 下面开始讲：   通过Google搜索iframe 自适应高度，结果5W多条，搜索iframe 高度自适应，结果2W多条。 我翻了前面的几十条，刨去大量的转载，有那么三五篇是原创的。而这几篇原创里面，基本上只谈到如何自适应静的东西，就是没有考虑到JS操作DO
使用外部滚动条控制iframe内容滚动
如果iframe内容很大，可能需要优化同步机制，避免不必要的计算和更新。 4. **兼容性**：这种方法依赖于浏览器对JavaScript和CSS的支持，需要注意不同浏览器之间的兼容性问题，特别是旧版本的浏览器可能不支持某些...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值