使用iframe底部留白

最新推荐文章于 2023-04-18 08:33:18 发布
最新推荐文章于 2023-04-18 08:33:18 发布
阅读量1.2k 收藏 3
点赞数 2
分类专栏： 前端 文章标签： iframe
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35603476/article/details/100918291
版权

 

经了解， iframe是一个内联框架，属于内联元素，可能会出现间距空白问题

下面两个属性均可解决问题

  1. vertical-align: bottom;
  2. display: block;
<iframe  border="0" style="display:block;" width="" height=""  frameborder="0" scrolling="no" src="" ></iframe>		
<iframe  border="0" style="vertical-align: bottom;" width="" height=""  frameborder="0" scrolling="no" src="" ></iframe>

解决！

年三十
关注
专栏目录
使用load提取页面公共内容因为浏览器跨域问题失效，使用iframe底部出现空白
Naughty_Fairy的博客
11-13 1452
在做项目时，通常页面header部分是相同的，但如果复制粘贴，代码量很大而且很冗余，因此可以像vue一样可以将页面拆分成不同的组件，而header就是一个组件，可以单独提取出来，最后再把不同组件合并呈现不同的页面； 但现在所有的主流浏览器都不支持，使用iframe来替换load吧！可以直接跳过以下load的演示： 以例子来演示： 刚开始想header.html到底光写body里面的元素，从c...
html移动端底部空白,PC端页面布局，在移动端查看头部和底部出现留白
weixin_34892992的博客
06-15 766
问件览客需和下于有快都业视的事一房望站是有题出现：body，html未填充满可视抖要支圈者器说是事天开的。年后编定功口小发还区域页面布局：页面内容初始化样式：html, body, div,iframe, p, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe,...
使用iframe的案例
01-29
使用iframe的案例
iframe的使用用法
10-31
iframe的使用用法
iframe嵌套网页多出来的空白如何解决
qq_53715696的博客
03-21 1284
解决iframe头部问题
使用iframe遇到底部留白的问题
qq_60483541的博客
09-17 946
使用iframe遇到底部留白的问题
网页嵌入iframe底部的空白
长歌的博客
08-17 4486
先不说废话了，上图吧 (⊙﹏⊙)图上不来 就是iframe嵌入到网页后，页面下方出现了几像素空白。 经过查资料，试探后发现与Html5有关系，使用回HTML4声明头后，一切正常。  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  查阅API后，原来在 HTML 5 中，仅仅支持 src 属性 so 。。。。
使用load提取页面公共内容因为浏览器跨域问题失效，使用iframe底部出现空白 （推荐使用）
Kevinvcc200的博客
05-28 412
在做项目时，通常页面header部分是相同的，但如果复制粘贴，代码量很大而且很冗余，因此可以像vue一样可以将页面拆分成不同的组件，而header就是一个组件，可以单独提取出来，最后再把不同组件合并呈现不同的页面； 但现在所有的主流浏览器都不支持，使用iframe来替换load吧！可以直接跳过以下load的演示： 以例子来演示： 刚开始想header.html到底光写body里面的元素，从c...
[css] 使用iframe底部留白
qq_14993591的博客
10-18 317
经了解， iframe是一个内联框架，属于内联元素，可能会出现间距空白问题 下面两个属性均可解决问题 vertical-align: bottom; display: block; <iframe border="0" style="display:block;" width="" height="" frameborder="0" scrolling="no" src="" ></iframe> <iframe border="0" style="vertic
iframe内部页面底部留白问题，非border display等原因
weixin_36982822的博客
10-29 1356
iframe内部页面在内容高度超过iframe高度时，底部出现一行空白的问题。 经排查后发现时在特殊场景下才会出现的空白。 主要原因是使用clearfix清除浮动时，clearfix:after的写法如果是content：“.”，只要是非空，即便指定高度和宽度为零，依然因为line-height的原因在iframe中占据高度。就会出现after的内容在iframe中，但是不在页面html和bo...
html 页面放大空白,解决HTML5 scale缩放空白问题
weixin_42403124的博客
06-03 1213
现有IOS应用，邮箱功能需要预览邮箱内容，但是邮箱内容都是有固定高宽，也就是这个页面实际上是在PC上显示，所以现在，在APP上预览时就出现内容过宽，过长；导致APP页面被拉伸变的很丑；html中使用的iframe嵌套的邮箱内容；网上都说IOS上使用iframe有诸多问题，实际上我并没有发现像网友说的那么不堪；使用iframe嵌套网页后，使用scale进行缩放会存在，下端空白问题。现在说一下解决方案...
前端主流面试官必问超详细面试题(整理完以秃头)持续更新中
qq_43375584的博客
07-07 3974
CDN利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户。CDN的作用：（1）在性能方面，引入CDN的作用在于：（2）在安全方面，CDN有助于防御DDoS网络攻击：懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。 比如：在较长的网页中。如果有很多图片，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，这样就浪费了性能。如果我们使用图片的懒加载就可以解决
[yishen] 小慕读书web端学习笔记
yishen的博客
09-23 2768
课程常用链接 【前奏-课程】快速入门Web阅读器开发 【小慕读书web端】Vue 实战商业级读书Web APP 全面提升技能 【epub图书免费下载站点 · 中文书】http://www.ziliaoh.com/epub.html 【项目代码gitee】https://gitee.com/yishen_yishen/vue-ebook 如果对你有帮助欢迎点个 star 【md格式 源文档下载】下载链接 在线阅读可能会乱码(我知道是编码问题，但在七牛云里不知道怎么修改)，请下载后查看 阅读器原理课程-免
CSS3基础知识个人总结
ZeroTwoZRX的博客
04-18 607
权重，选择器，边框，边框圆角，背景，浮动，盒子模型，文本溢出，伪类，定位，表格，自适应，元素隐藏，满屏布局，阴影，渐变，浏览器前缀，过渡，动画，transition，transform，animation。
针对iframe底部留白问题解决方案
YoungC
10-09 1170
先来聊一下。之前做的专题因为有过改底部公司名称的问题，一下让小伙伴刷了好几百个专题的底部，后来决定将以后的所有专题底部都搞为公共的，所以启用了好久不用的iframe，一切正常的之后，隐约发现了一个小bug，就是底部出现了一条横线，那么针对这一个问题有了一个简单的解决办法。 先上一段代码 <iframe src="http://www.yc-wr.com" style="width: 100%;border: none;height: 218px;vertical-align:bo
iframe 放在页面底部时有白边的bug修复
zeroyulong的博客
06-21 3002
在iframe标签上添加display:block&lt;iframe border="0" style="display:block;" width="1000" height="100" frameborder="0" scrolling="no" src="footer.html" &gt;&lt;/iframe&gt;
HTML嵌入iframe空白,IE6下iFrame页面嵌套html空白问题解决
weixin_42521558的博客
06-19 1396
IE6下用iframe嵌套页面：被嵌套页面如果有如下css：html { position: relative; }会导致出现如下问题：被嵌套页面先加载出来，然后变为空白。原因：被嵌套html定位到西伯利亚去了。解决办法：在被嵌套的html加载完成后，把iframe的position属性值改为relative。例一：iframe页：被嵌套页：html { position: relative; }...
iframe使用后如何去掉与下方元素之间的缝隙(留白、边框)，实用的解决办法！！！！
weixin_45969078的博客
06-08 2930
可以看到当页面使用iframe后，与下方div之间有一段距离。如何清除两个元素之间的缝隙。 解决办法
使用iframe标签嵌入网页后怎么解决留白
最新发布
05-31
当使用 iframe 标签嵌入网页时，可能会出现留白的情况。这是因为 iframe 默认情况下具有一定的内边距和外边距。 为了解决这个问题，您可以在 iframe 标签中添加以下属性： ```html <iframe src="header.html" frameborder="0" scrolling="no" width="100%" style="display: block; border: none; margin: 0; padding: 0;"></iframe> ``` 其中，style 属性包含了以下样式： - `display: block;`：将 iframe 元素设置为块级元素，使其与其他块级元素（如 div）相同。 - `border: none;`：将 iframe 边框设置为无，以消除默认的边框。 - `margin: 0;`：将 iframe 外边距设置为 0，以消除默认的外边距。 - `padding: 0;`：将 iframe 内边距设置为 0，以消除默认的内边距。 通过添加这些样式，您可以消除 iframe 的留白，使其与其他元素对齐。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值