使用iframe遇到底部留白的问题

已于 2022-09-18 20:07:41 修改
阅读量821 收藏 1
点赞数 1
文章标签： html css 前端
于 2022-09-17 19:25:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_60483541/article/details/126909134
版权

公司最近的项目上需要用到iframe,小编也是第一次使用，本来是好好的，直到我发现底部空出了一段空白，起先是以为高度没有继承父元素的，然后去父元素那里height:100%,最终都没有用。排除了时高度的问题，最后想到以前学的vertical-align或许是对这个问题解决的方案，结果是对的。

代码来~~~

 给大家测试一波vertical-align:bottom

 

 大家可以看到这个时候图片的底部距离本行的底部还是有一定的距离的

 这个时候大家可以看到图片跟跟这一行的就没有距离了

vertical-align:bottom:使元素及其后代元素的底部与整行的底部对齐。

如果大家还想要了解更多可以去了解一下基线

好了，希望帮到更多的小伙伴，本次小记到此结束~~~

不知道叫啥好了158
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
使用load提取页面公共内容因为浏览器跨域问题失效，使用iframe底部出现空白
Naughty_Fairy的博客
11-13 1434
在做项目时，通常页面header部分是相同的，但如果复制粘贴，代码量很大而且很冗余，因此可以像vue一样可以将页面拆分成不同的组件，而header就是一个组件，可以单独提取出来，最后再把不同组件合并呈现不同的页面； 但现在所有的主流浏览器都不支持，使用iframe来替换load吧！可以直接跳过以下load的演示： 以例子来演示： 刚开始想header.html到底光写body里面的元素，从c...
jquery插件jbox使用iframe关闭问题
12-11
此按钮调用close方法关闭，弹出窗口，没有办法关闭，因为close方法需要以个参数，参数应该是那个iframe但是将其传入并不生效，不知道为什么在网上查找也没有找到解决方案。。 最后只好自己改其源码，在其close方法第...
网页嵌入iframe底部的空白
长歌的博客
08-17 4468
先不说废话了，上图吧 (⊙﹏⊙)图上不来 就是iframe嵌入到网页后，页面下方出现了几像素空白。 经过查资料，试探后发现与Html5有关系，使用回HTML4声明头后，一切正常。  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  查阅API后，原来在 HTML 5 中，仅仅支持 src 属性 so 。。。。
iframe底部有白边
kylin_zdd的专栏
09-18 2549
iframe底部有白边
iframe内部页面底部留白问题，非border display等原因
weixin_36982822的博客
10-29 1309
iframe内部页面在内容高度超过iframe高度时，底部出现一行空白的问题。 经排查后发现时在特殊场景下才会出现的空白。 主要原因是使用clearfix清除浮动时，clearfix:after的写法如果是content：“.”，只要是非空，即便指定高度和宽度为零，依然因为line-height的原因在iframe中占据高度。就会出现after的内容在iframe中，但是不在页面html和bo...
[css] 使用iframe底部留白
qq_14993591的博客
10-18 303
经了解， 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的低边会留白的处理
jievachange
03-27 2747
在用iframe的时候，iframe默认的宽高分别是300px 150px ，但如果外面包一个div的话，无论在css里怎么写margin:0;padding:0px ,都是没有任何用的解决办法把iframe的display:block;border:0px即可觖决
iframe的使用用法
10-31
iframe 的使用用法 在 HTML 中，iframe 是一个非常重要的标签，它允许我们在网页中嵌入另一个 HTML 文档，从而实现更加复杂的网页布局。下面我们来详细介绍 iframe 的使用用法。 一、iframe 的基本使用 首先，...
使用iframe的案例
01-29
在网页设计和开发中，`iframe`（Inline Frame）是一种非常重要的技术，它允许我们将一个网页嵌入到另一个网页中。...在实际项目中，我们需要根据需求和目标来判断何时使用`iframe`，并注意其潜在的问题。
详解使用postMessage解决iframe跨域通信问题
12-13
总的来说，`postMessage`是现代Web开发中解决跨域通信问题的一个强大工具，它简化了iframe和其他窗口之间的交互。熟练掌握`postMessage`的使用，可以极大地提升跨域应用的用户体验和功能实现。在实际应用中，根据...
iframe网页上下左右布局模板
03-04
iframe网页上下左右布局模板，可以修改里面的css代码来更改各个模块的大小，位置。很基本使用的网页布局模板
iframe跨域常用问题和iframe页面自适应
08-20
当`iframe`尝试加载的页面与包含它的页面不在同一域名下时，就会遇到跨域问题。在处理`iframe`跨域时，主要涉及以下两种方法： 1. **CORS（Cross-Origin Resource Sharing）**：这是一种现代浏览器支持的跨域资源...
针对iframe底部留白问题解决方案
YoungC
10-09 1128
先来聊一下。之前做的专题因为有过改底部公司名称的问题，一下让小伙伴刷了好几百个专题的底部，后来决定将以后的所有专题底部都搞为公共的，所以启用了好久不用的iframe，一切正常的之后，隐约发现了一个小bug，就是底部出现了一条横线，那么针对这一个问题有了一个简单的解决办法。 先上一段代码 <iframe src="http://www.yc-wr.com" style="width: 100%;border: none;height: 218px;vertical-align:bo
使用load提取页面公共内容因为浏览器跨域问题失效，使用iframe底部出现空白 （推荐使用）
Kevinvcc200的博客
05-28 383
在做项目时，通常页面header部分是相同的，但如果复制粘贴，代码量很大而且很冗余，因此可以像vue一样可以将页面拆分成不同的组件，而header就是一个组件，可以单独提取出来，最后再把不同组件合并呈现不同的页面； 但现在所有的主流浏览器都不支持，使用iframe来替换load吧！可以直接跳过以下load的演示： 以例子来演示： 刚开始想header.html到底光写body里面的元素，从c...
iframe嵌套出现高度无法自适应，底部滑动出现白条
m0_53111653的博客
02-13 434
iframe嵌套出现高度无法自适应，底部滑动出现白条
vue中嵌入iframe有白边问题
最新发布
weixin_44042792的博客
05-20 1086
设置iframe背景透明 allowtransparency="true"是否显示边框 frameborder=“0” 0不显示 1显示。marginheight="" 规定框架内容上边和下边之间的高度。给iframe元素使用vertical-align：bottom。marginwidth="" 规定框架左边和右边的空白距离。frameborder="":框架边框；设置边框宽度 border="0"height="" 框架的高度。width="" 框架的宽度。
iframe使用后如何去掉与下方元素之间的缝隙(留白、边框)，实用的解决办法！！！！
weixin_45969078的博客
06-08 2853
可以看到当页面使用iframe后，与下方div之间有一段距离。如何清除两个元素之间的缝隙。 解决办法
使用iframe底部留白
年三十的博客
09-17 1211
经了解，iframe是一个内联框架，属于内联元素，可能会出现间距空白问题 下面两个属性均可解决问题 vertical-align: bottom; display: block; <iframe border="0" style="display:block;" width="" height="" frameborder="0" scrolling="no" src...
aspx 中iframe遇到跨域问题怎么办
05-01
当 iframe 中的内容与父页面不在同一个域时，就会出现跨域问题。这是由于浏览器的同源策略所限制的。为了解决这个问题，可以进行以下操作： 1. 在 iframe 的 src 属性中指定一个代理页面，代理页面与 iframe 内嵌的页面在同一个域中。代理页面可以通过 AJAX 请求获取 iframe 中的内容，然后将其返回给父页面显示。 2. 使用 window.postMessage 方法进行跨域通信。在 iframe 中通过 postMessage 方法向父页面发送消息，然后在父页面中通过监听 message 事件接收到消息。 需要注意的是，以上两种方法都需要在服务器端进行配置，以确保能够正常进行跨域通信。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值