iframe 高度设置为0时还有占位

最新推荐文章于 2024-05-21 18:11:13 发布
最新推荐文章于 2024-05-21 18:11:13 发布
阅读量512 收藏
点赞数 2
文章标签： html css
原文链接：https://blog.csdn.net/wangjun5159/article/details/72609970
版权

iframe它是一个内联元素，默认是跟baseline对齐的，iframe后边有个看不见、摸不着的行内空白节点， 空白节点占据着高度，iframe与空白节点的基线对齐，导致了div被撑开，从而出现滚动条。查看空白节点捣鬼
找到原因了，解决方案也就简单了。
第一种，设置iframe的vertical-align:top
第二种，设置父div的font-size:0，从而影响空白节点的line-height是0，从而不占据高度。
第三种，改变iframe的内联元素性质，改为块级元素，display:block

UMR_07
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
iframe src为图片时的高度自适应的代码
10-30
iframe src为图片时的高度自适应的代码
JavaScript自动设置IFrame高度的小例子
10-27
JavaScript自动设置IFrame高度的小例子，需要的朋友可以参考一下
iframe不完全显示的解决方法
热门推荐
lujianfeiccie2009的专栏
05-18 3万+
<br /><br />如果在页面中用到了iframe标签，有时在浏览器中并不能完全显示iframe，导致有些iframe内的内容不能被显示，如果遇到这种情况，使用以下js可以解决大多数问题。<br /> <br />这是iframe标签：<iframemarginwidth="0" src=" " marginheight="0" width="100%" name="i" id="urlIframe" frameborder="0" scrolling="no" onload="reinitIframe
图片无法显示 base64图片无法显示 图片体积过大无法显示
shalDream的博客
06-06 6045
图片体积过大 在vue项目中，经常使用webpack或其他打包工具，但因打包工具对图片的引入经常有大小限制，所以导致图片无法加载，一般来说，图片超过20kb就容易无法显示，此时应使用require引入方法显示图片 如果是背景图图片，可以直接使用style添加背景图片实现 <div class="nav" :style="'background-image: url(' + bgl + ');'"> </div> export default { data() { retu
隐藏的iframe加载的页面获取宽高为0问题
weixin_42776979的博客
10-31 3441
由于初始化的时候有些iframe是隐藏的，当iframe被置为显示的时候，内部加载页面获取宽高为空。 由于无法获取宽高我们就没有办法根据页面宽高初始化图表元素。 有的版本浏览器只要代码初始化iframe不是隐藏，使用js隐藏的 也是没有问题。 解决问题思路： 1、判断图表所在页面宽高，小于等于0的时候，出一个固定的初始化值。 这样可以解决问题，但是 每一个页面都要加判断。 $(fu...
郁闷的Iframe
xieronghua246的博客
12-17 75
没有想到两点： 1.设置 width="100%"  height="100%"  与style="width:100%;height:100%" 有时候效果是不一样的 2.即使把ifame的高度设置为0，宽度设置为0，依然会占用10空间。可以在外面使用div将其隐藏...
使用iframe的时候占满全屏显示内容
m0_46415203的博客
06-28 3199
iframe打开窗口是显示不全，需要占满全屏显示内容
iframe不能完全显示
l1134的博客
11-12 3379
html代码使用 iframe 不能完全显示，代码如下 <div className={styles.knowledgeRouteStyle} style={{ width: '100%', height: '95%', touchAction: ' none', overflowY: 'scroll' }} > <iframe id="iframe_detl" name="iframe_a" fr
iframe自适应高度
zhu_menglu的博客
04-12 4400
其中，padding-bottom的值需要根据iframe的宽高比来计算，例如，如果iframe的宽高比为16:9，则padding-bottom的值为56.25%（9除以16乘以100%）。可以设置iframe标签的高度为0，然后使用padding-bottom属性来设置iframe标签的高度，使其按照原来的比例自适应。这样，当浏览器窗口大小改变时，iframe标签的高度会自动按照原来的比例进行调整，从而实现自适应效果。
jQuery获取与设置iframe高度的方法
10-21
主要介绍了jQuery获取与设置iframe高度的方法,涉及jQuery针对iframe元素的获取与设置相关操作技巧,非常简单实用,需要的朋友可以参考下
Cypress 中使用 iframe
weixin_40646872的博客
10-02 214
我们可能会访问 iframe 的元素在多个测试，因此，让上面的效用函数为赛普拉斯自定义命令里面的文件。自定义命令将自动在所有规范文件中可用，因为支持文件与每个规范文件连接在一起。return cy})})我们可以通过禁用内部命令的日志记录来隐藏代码中每一步的细节。return cy})左栏中的命令日志现在看起来好多了。带有单个日志和断言的自定义命令。
iframe异步加载和延迟加载
php-yyds
12-15 965
iframe异步加载：通常情况下，浏览器会按照HTML文档的顺序加载页面中的元素，而iframe标签内的内容会阻塞主页面的加载。为了解决这个问题，可以将iframe的src属性设置为空，而将实际需要加载的内容放在一个data-src属性中，然后使用JavaScript动态加载iframe内容。这样，主页面会先加载完成，用户可以先看到主页面的内容，然后再加载iframe内容，提升了页面的加载速度和用户体验。延迟加载：延迟加载是指将页面中的某些资源（如图片、脚本等）推迟到页面其他内容加载完成后再加载。
动态获取并设置 iframe 自适应高度
张兴华的博客
08-31 2250
实际需求：页面中有一些固定元素 + 内嵌 iframe 页面，此时如果给 iframe 设置固定高度会导致 iframe 内部滚动，体验不佳。于是需要动态获取 iframe 实际高度并设置，但有些 iframe 页面会有占位 loading or 骨架屏等，导致一开始就获取高度会不准。所以给出解决方案如下：...
html iframe使用问题，宽高问题
我有一个魔盒的博客
04-06 524
当一个iframe被隐藏时，它的宽高为0。
HTML iframe标签以及其高度问题
mengxianglong123的博客
03-03 3508
iframe基本概念 其实它就是在本页面应用另一个页面，让被引用的页面成为当前页面的一部分。 基本用法 &lt;iframe src="demo.html" height="300" width="500" name="demo" scrolling="auto" sandbox="allow-same-origin"&gt;&lt;/iframe&
6种iframe高度自适应的方法
web前端开发
03-12 3万+
js自适应高度，实际上就是设置iframe的高度，设置等于内嵌网页的高度，从而看不到滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。我们可以通过css来给它直接定义一个高度，同样可以...
html iframe 自适应高度宽度,给iframe设置尺寸自适应为什么高度那么怪？？
weixin_39829307的博客
06-25 184
$(document).ready(function(){$("#aaa").load(function(){//$(this).width(0); //用于每次刷新时控制IFRAME宽度初始化// $(this).height(0); //用于每次刷新时控制IFRAME高度初始化var width = $(this).contents().find("#con").width() ;var he...
css 移动端 利用padding自适应高度占位
chixunai6351的博客
03-08 429
当margin/padding取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的！ 两种实现方式： <div id="container" class="placeholder"></div> 1.第...
前端基础入门三大核心之HTML篇 —— 深入解析从URL请求到页面加载的艺术
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-21 330
前端技术的博大精深，远不止于此。从HTML的简单解析到复杂的SPA应用，每一步都蕴含着开发者对极致体验的追求。本文旨在为你铺就一条坚实的基础之路，鼓励你不断深入学习，探索新技术，实践新理念。前端的世界日新月异，保持好奇心，勇于实践，你将在这条道路上走得更远。最后，我们期待你在评论区分享你的学习心得、实战经验或是对未来前端发展的独到见解，让我们一起推动Web技术的车轮滚滚向前。欢迎来到我的博客，很高兴能够在这里和您见面！
iframe src为图片时的高度自适应
12-27
当iframe的src为图片时，通常会出现图片大小不一致的情况，因此需要对iframe的高度进行自适应。一种常见的做法是通过JavaScript来实现高度的自适应。具体做法是，首先获取iframe内部的图片对象，然后通过获取图片的宽度和高度，将其应用到iframe的高度上，以实现高度自适应。 另外，还可以利用css中的object-fit属性，将图片按照一定的规则进行填充，从而使得iframe的高度能够与图片的大小相匹配。例如，可以设置object-fit: cover;来让图片在iframe中按照比例填充，并且不拉伸变形，在保持图片原有比例的同时，填充满整个iframe。 除此之外，还可以使用响应式布局来实现iframe的高度自适应。通过设置CSS中的max-width属性来限制图片的最大宽度，使得图片能够在不同设备上都能够正常显示，同时保持整体布局的稳定性。 总之，通过JavaScript、CSS中的object-fit属性以及响应式布局等方法，可以实现当iframe的src为图片时的高度自适应，从而使得图片能够在页面中得到合适的展示。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值