iframe完美解决自适应内嵌网页高度

最新推荐文章于 2024-04-29 21:14:52 发布
最新推荐文章于 2024-04-29 21:14:52 发布
阅读量4.8k 收藏 12
点赞数 6
文章标签： css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40697172/article/details/106865583
版权

1.css

iframe {
    display: block;
    border: none;
    height: 90vh;/*设置高度百分比,一直调到只有一个滚动调为止*/
    width: 100%;
}

2.html

<iframe src="https://www.bilibili.com/video/BV1E7411b7QN" width="100%" allowfullscreen frameborder="0"></iframe>

3.效果

右侧滚动条适应内嵌网页滑动

4.总结

外层网页的高度固定为浏览器窗口高度，这样一来滚动条就只有一个，即iframe嵌套的内层网页的滚动条。

qq_40697172
关注
  • 6
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
iframe自动适应高度（完美自适应高度嵌套代码），兼容目前主流浏览器。
08-12
iframe自动适应高度，很难得的资源，很多下载的都是部分浏览器可以用，这个可以兼容360.ie6789等，遨游，火狐。搜狗等浏览器。。亲自测试。
网页设计技巧:iframe自适应高度的问题
09-22
所谓iframe自适应高度，就是，基于界面美观和交互的考虑，隐藏了iframe的border和scrollbar，让人看不出它是个iframe
Iframe 嵌入： 页面嵌入并保持自适应页面的宽高并铺满整个屏幕
虎康的博客
03-14 1093
当我们使用 Iframe 嵌入页面后，会看到它只在小小的一部分进行展示，如何让它铺满整个屏幕。在上面的示例中，我们创建了一个Vue组件，利用标签将指定的URL页面嵌入到Vue应用中。在上面的示例中，我们使用CSS样式来实现让嵌入的。类设置了宽度和高度均为100%，从而使得。类设置了固定定位，并且铺满整个屏幕，自适应页面的宽高并铺满整个屏幕。可以根据父容器的大小进行自适应。
完美解决跨域iframe的高度自适应
05-25
完美解决跨域iframe的高度自适应,完美解决跨子域iframe的高度自适应，嵌入几个页面解决跨域iframe的高度自适应。。。
如何根据iframe内嵌页面调整iframe高宽
weixin_34122604的博客
12-03 225
问题来自于工作的实例，我的一个域名A的页面，有个iframe，它可能内嵌了另一个域名B的页面，也可能内嵌域名C的页面，但是呢，B和C的页面大小是不一样的，特别是高是不一样的高，那么我如何设置iframe的height属性呢？ 这个本质就是跨域设置的问题。 一种解法 B和C提供一个jsonp接口，让有iframe的页面A来调用，这个jsonp接口的目的就是告诉A，我的页面的高宽各是多少。 第...
如何根据iframe内嵌页面调整iframe高宽续篇
weixin_33862041的博客
12-04 154
接着昨天的工作 如何根据iframe内嵌页面调整iframe高宽 来说，按照文章中说的第二种方法实现代码如下： 实现 A.com/detail/view 页面的iframe代码如下： &lt;iframe id="thirdiframe" src="http://B.com/location/testiframe" width="100%" scrolling="no" frameborde...
实现iframe内嵌页面百分百宽高
kunzedang_9528的博客
07-08 580
第一种 iframe { /*转换为块级元素*/ display: block; /*背景色*/ background: #000; /*重置默认边框*/ border: none; height: 100vh; width: 100vw; } 此文章是我开发过程的一个记录，方便我日后学习和复盘。若能帮到你不胜荣幸。 ...
完美解决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完美自适应宽度、高度
ITSM/ITIL/网络安全/IT运维
10-14 9145
涉及到系统集成的时候，前端我们经常会用到iframe嵌入，但是嵌入的时候经常有不适应的情况，太长或太宽、滚动条。。。 下面的方法可以做到使嵌入的iframe自适应宽度、高度， 1、嵌入iframe，加入onload事件 <iframe id="bi_iframe" src="http://xx.xx.xx.xx/yourServicePath&para1=xxx" onload="adjustIframe();" frameborder="0" scrol...
react使用iframe标签引入网页自适应高度
Tyler_YC的博客
12-21 1904
react使用iframe标签引入网页自适应高度 定义Iframe 函数组件(Iframe函数组件可提为高阶组件提高代码复用性) const Iframe = props => { window.onresize=function(){ props.load()} return ( <iframe id="iframeId" onLoad={ props.load} src={ props.src} width={ props.width} height={`${ props.hei
关于Iframe嵌入页面，获取内部页面高度的办法
m0_46750297的博客
03-18 1万+
项目中经常会嵌入别人的页面，如果不知道被嵌入页面的高度，就没法给Iframe高度赋值，内部嵌入的页面就会出现滚动条，影响页面的美观。 1、如果被嵌入页面和当前页面不跨域，可以使用Iframe的@load加载事件获取内部高度 <iframe name="outerPage" @load="iframeload()" :src="url" ref="iframe" scrolling="auto" frameborder="0" id="outerPage" :style="{ 'min-
jQuery解决iframe高度自适应代码
10-29
网上查了好多用着都不行，自己搞定了：在包含iframe的页面中加入以下脚本，基本思想是在iframe加载内容后重新设置高度，下面代码尽在IE6中用过，没在其他浏览器中测试。
js实现iframe自动自适应高度的方法
10-24
主要介绍了js实现iframe自动自适应高度的方法,涉及javascript操作iframe框架的技巧,非常具有实用价值,需要的朋友可以参考下
Iframe实现跨浏览器自适应高度解决方法
12-09
本文以实例形式讲述了Iframe实现跨浏览器自适应高度解决方法，非常具有实用价值。分享给大家供大家参考之用。具体方法如下： 该方法使用了jQuery，因此需要在iframe的src页面里面引入jQuery。 父页面里面相对简单...
file模式访问网页时iframe高度自适应解决方案
10-27
发现自己做的网页是通过file方式访问的，将网页代码放到apache下通过http协议访问，在iframe加载的时候调用如下js方法:果然网页高度能够自适应（对于其他方案应该也有效果，我没有注意去尝试）感兴趣的朋友可以了解...
CSS特性
lan_da_wang的博客
04-29 358
化简代码，定位问题，解决问题。
CSS的box-shadow 用法
于坤
04-28 364
CSS的box-shadow属性是一个强大的工具，用于向框（盒子）元素添加阴影效果。它可以添加一个或多个阴影，并可以定制阴影的大小、模糊程度、颜色等。
nuxt3使用记录六：禁用莫名其妙的Tailwind CSS(html文件大大减小)
最新发布
lsjweiyi的博客
04-29 406
平时没注意看，这时候看，猜测是nuxt的默认配置就会加载这玩意，关键我想不明白一个css，为啥要默认加载呢？下面那个style，也不是我写的，我试着删掉，发现对项目也没影响，而且也是每个html文件都有。看到是跳过了这玩意，所以nuxt3这玩意，还有很多可以琢磨的地方，50k star的成熟项目也有不成熟的地方嘛。然后我记得在官网看过它，去搜索，果然，这些nuxt自带的一个样式，不过没说为啥要引用他。发现这个问题是因为，今天我突然很好奇，我发现之前构建的自动产生的。我全局搜索我的项目，都没有引用这玩意！
第二弹：走进CSS世界，学习记录
weixin_64638001的博客
04-29 760
当选择器包含多种选择器时，需要将多种选择器优先级相加然后进行比较。选择器的优先级不会超过它最大数量级，如果选择器优先级一样，则使用靠后的样式。子选择器：选择器1 > 选择器2 表示选择器1的子元素为选择器2(只有父子关系才可以)。相邻选择器：选择器1 + 选择器2 表示选择紧贴在选择器1之后的选择器2元素。兄弟选择器：选择器1 ~ 选择器2 表示选择器1后面的所有兄弟元素选择器2。包含选择器：选择器1 选择器2 表示选择器2被选择器1包含即可。组合选择器：选择器1,选择器2 多个选择器之间用逗号分隔。
iframe如何高度自适应
04-17
iframe是HTML中的一个标签，用于在当前页面中嵌入另一个页面。要实现iframe的高度自适应，可以通过以下几种方式： 1. 使用JavaScript动态调整iframe的高度：可以通过JavaScript获取iframe内部内容的高度，然后将该高度赋值给iframe的height属性，实现自适应。具体代码如下： ```javascript <script> function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px'; } </script> <iframe src="your_page_url" onload="resizeIframe(this)"></iframe> ``` 2. 使用CSS的calc()函数：可以通过CSS的calc()函数计算iframe的高度，使其自适应。具体代码如下： ```html <style> .iframe-wrapper { position: relative; padding-bottom: calc(100% / (16 / 9)); /* 假设iframe宽高比为16:9 */ height: 0; overflow: hidden; } .iframe-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> <div class="iframe-wrapper"> <iframe src="your_page_url"></iframe> </div> ``` 3. 使用postMessage进行跨域通信：如果iframe内嵌的页面与当前页面不在同一个域下，可以使用postMessage方法进行跨域通信，从而获取到iframe内部内容的高度，并进行相应的调整。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值