使用iframe 标签 网页底部出现几px间隙

最新推荐文章于 2023-02-13 10:56:01 发布
最新推荐文章于 2023-02-13 10:56:01 发布
阅读量976 收藏 2
点赞数 4
分类专栏： bug总结
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Y_shihao/article/details/105124690
版权

问题：使用iframe 标签 网页底部出现白边
在这里插入图片描述在这里插入图片描述
解决办法：
推测原因：是iframe标签类似于img标签那样，也是基于基线对齐，底部就出现几px的间隙，img标签设置了vertical-align：bottom，间隙就没了。iframe标签设置之后也可以，以上纯属个人推测，欢迎各位大佬指出

//在iframe标签里加style：vertical-align:bottom;

<iframe width="100%" id="iframe" frameborder="0" scrolling="no" 
style="vertical-align:bottom;"></iframe>
YoungShiHao
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
django2用iframe标签完成网页内嵌播放b站视频功能
12-23
前言： 给自己的网站中加入视频资源，有两种方法，一种是用iframe标签引用外站资源，另一种则使用video标签，获取站内资源进行视频播放。其中前者顾名思义，是将视频资源上传到视频网站中，然后通过引用的方式在站内播放视频，这种方法适用于视频资源内容公开免费，且不想花钱购买七牛云空间的开发者，毕竟是免费的嘛！而后者，则是需要有云空间存放视频资源才可以，不过后者的好处是，可以用于视频付费内容的开发。 今天恰好遇到了给自己要开发的项目，加一段视频新闻公告的需求！既然是新闻公告内容，当然是不需要加密的了。所以，也就没有必要花钱搞个云空间了。果断选择第一种，使用iframe标签的方式来实现网页内嵌播放
HTML中iFrame标签的两个用法介绍
12-13
最近工作有个在项目-布兜收藏夹。简言之就是将喜欢的图片收藏到布兜页面上来，这其中用到了很多关于iframe的方面，总结如下：　　1. 作为弹出层铺底覆盖 　　大家如果做过那种黑色遮罩盖住整张页面，而碰巧用户用的是IE6，更碰巧的是页面上有select元素，那就有得头疼了（原理就不在这里赘述了）。我们会发现弹出的DIV没法遮住select, 轮到我们的iframe出场了。逻辑如下：     与弹出div同级放入iframe    保证iframe的 z-index小于弹层div z-index    增加window resize和scroll事件, 保证iframe能盖住整张页面 　　部分代码
使用iframe在网页中嵌入其他网页的方法
09-28
主要介绍了使用iframe在网页中嵌入其他网页的方法,需要的朋友可以参考下
符合W3C网页标准的iframe标签的使用方法
10-30
符合W3C网页标准的iframe标签的使用方法
js判断iframe内的网页是否滚动到底部触发事件
12-09
之前有个需求是要判断iframe内的网页是否滚动到底部触发事件, 网上找了许多资料都是说在当前页面下的, 索性就自己研究了一下, 找到了解决方法. clientHeight：这个元素的高度，占用整个空间的高度 offsetHeight：是指元素内容的高度 scrollTop：可以理解为滚动条可以滚动的长度 以下是源代码 代码如下: <iframe src=”~/Files/3.html” id=”iframepage” width=”825″ onload=”func()”></iframe> [removed] function func() {
消除 HTML 中iframe间隙
qq_31492865的博客
11-06 2436
这个坑是自己挖的，好好的用div不行吗，偏偏用iframe装什么高大上，但却是这个问题萦绕我一天，现在给出完美解决方案 总之，导致iframe间隙的问题有很多，比如iframe自身属性设置问题，boder等，但这里不讲这些基本的 我的坑是这些设置好了，竟然还有间隙。 思路1：            因为iframe引入的html本身就有间隙，主要是bom问题，因为中文问题，所以自动在dom...
iframe嵌套出现高度无法自适应，底部滑动出现白条
m0_53111653的博客
02-13 425
iframe嵌套出现高度无法自适应，底部滑动出现白条
ifame底部留白问题
qq_40254660的博客
06-25 407
&lt;iframe src="backtop.html" frameborder="0" scrolling="no" id="test" onload="this.height=100"&gt;&lt;/iframe&gt; &lt;script type="text/javascript"&gt; function reinitIfr
div包裹的iframe有5px的高度差问题
风火一回，一生不毁
09-07 2984
最近遇到一个问题：用一个div包裹一个iframe，但无论如何，div的高度都比iframe高了5px。百思不得其解，后来在网上多方查找，才发现问题的根源所在。 问题：div高度大于iframe高度5px左右。 <iframe id="iframe" name="iframe" src="home.html" style="width:100%;" frameborder="0" scro
完美解决iframe的100%高度问题
热门推荐
skiof007的专栏
04-07 1万+
1.想让iframe的高度为100%,必须让其父标签的高度为100%，比如html、body都要100%才行。 2.如果iframe处在一个表格内，你会发现，只是设置html与body为100%还是不行的，即便是设置table为100%也是不行。在这种情况下，需要把页面头部的“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">”删除
关于解决iframe标签嵌套问题的解决方法
11-21
问题描述 当我们使用easyui做后台管理系统的时候，会使用tree组件来实现树形菜单，而我们每点击一次相应菜单，会根据是否有url来判断是否是一级菜单，以及是否已经存在 //根据该节点名字判断该节点是否存在 if ($("#tabs").tabs("exists",node.text)){ //如果存在就直接选中 $("#tabs").tabs("select",node.text); } 如果为否，我们就会嵌套一个iframe标签来打开一个相应的
a标签的target链接指向iframe的方法
09-28
主要介绍了a标签的target链接指向iframe的方法，切记不是用Id来做指向的目标而是name，需要的朋友可以参考下
Android WebView拦截iframe标签内部跳转教程
08-19
主要介绍了Android WebView拦截iframe标签内部跳转教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
iframe标签用法详解(属性、透明、自适应高度)
01-19
1、iframe 定义和用法 iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。 HTML 与 XHTML 之间的差异 在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不支持 iframe 元素。 提示和注释： 提示：您可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对无法理解 iframe 的浏览器。 iframe标签是成对出现的,以<iframe>开始,</iframe>结束 iframe标签内的内容可以做为浏览器不支持iframe标签时显示 属性 属性 值 描述 DT
解析如何利用iframe标签以及js制作时钟
11-26
如何制作一个时钟呢？效果如下图所示： 这里的时钟会不停的走，但是下面的页面是不会变得，这样就实现了我们想要的效果了。下面我将分为以下几个方面来讲： javascript中的Date引用类型 几种效果不佳的实例 <iframe>标签 最终效果不错的实例 如果大家想直接看最终不错的效果实例，可以看文章结尾处代码。 第一部分：Date引用类型 1.日期对象可以直接使用new操作符和Date构造函数构造。代码如下： var date=new Date(); 2. 通过构造函数直接得到的date对象的时间是当前的时间。由于Date类型使用自UTC（Coordinated Univers
iframe底边多出4px或5px解决办法
weixin_30480651的博客
11-27 591
问题： 在处理iframe框架自适应时，并且已经去掉iframe的边框，但仍然出现底边多出4px或5px高度的情况。如图 <div id="content"> <iframe id="iframe" width="100%" height="100%" marginwidth="0" marginheight="0" scrolling="yes" allo...
修正 iframe 多出5像素的问题
无止境学的博客
12-02 307
最近在编写前端代码使用 iframe 元素时，由于我将 iframe 元素嵌淘到div元素中，当设定了所需的尺寸时，总是莫名其妙的出现滚动条，解决方法是为元素设置 CSS 属性 display:block 即可解决，至于为啥，没弄明白，答案是别人总结的。抽空还得研究研究。 ...
使用iframe标签嵌入网页头部
最新发布
05-31
您可以使用以下代码来使用 iframe 标签嵌入网页头部： ```html <!DOCTYPE html> <html> <head> <title>My Page</title> <style> #header { height: 100px; width: 100%; background-color: #444; color: #fff; text-align: center; line-height: 100px; font-size: 36px; } </style> </head> <body> <iframe src="header.html" frameborder="0" scrolling="no" width="100%"></iframe> <div class="content"> <p>Here is the main content of the page.</p> </div> </body> </html> ``` 在这个例子中，我们创建了一个 id 为 header 的 div 元素作为网页头部，并将其样式设置为黑色背景、白色文字、居中对齐、高度为 100px 的标题栏。然后，我们使用 iframe 标签将 header.html 文件嵌入到我们的主 HTML 文件中，并将其设置为 100% 宽度以确保它与整个页面一样宽。最后，我们在主 HTML 文件中添加了一个 class 为 content 的 div 元素作为主要内容区域。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值