ifram高度为父元素100%后出滚动条

已于 2023-01-10 13:56:49 修改
阅读量555 收藏 3
点赞数 1
分类专栏： JS css 文章标签： css 前端 html
于 2023-01-10 13:56:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhengzhongz/article/details/128628810
版权
JS 同时被 2 个专栏收录
10 篇文章 0 订阅
订阅专栏
css
6 篇文章 1 订阅
订阅专栏 
  <iframe  :src="previewUrl" frameborder="0" width="100%" height="100%" style="display:block" />

设置ifram宽高为父元素的100%，边框为0，显示为块级元素

具体原因为：由于 iframe 默认是 inline 元素，默认它会放在基线之上，而基线之下还有一定高度（即 descender 部分）所以它会溢出了。因此，我们需要设置 iframe 的样式为 display: block 或者 vertical-align: bottom。

参考：HTML 的 iframe 元素 | 元素

二喵的代码
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
iframe 高度100%时，出现垂直滚动条
wangjun5159的专栏
05-21 1万+
问题需求是这样的，iframe在一个div中，并且iframe高度与div一样，所以设置了iframe高度是100%，结果div出现了滚动条，在排除了padding、margin的因素外，还是有滚动条。按理说，只有iframe有滚动条，父div不应该有滚动条。在线demo
iframe高度设置100%了，并且设置了无滚动条属性，还是出现滚动条
生面别开
09-28 4804
原因：iframe标签和img标签类似，是inline-block标签。 高度写百分比继承的是父层的宽度。 解决办法一般有两种方案： 一种是改变父级样式，如font-size: 0; 或者line-height: 0;  另一路是改变inline-block自身样式，如display: block 或者vertical-align: middle。
设置iframe的高度为100%
jsnjzgb的博客
11-16 1757
1、页面设置为 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt; 2、要在样式style中设置 style="height:100%"
[经验] 解决iframe标签100%宽高时出现滚动条问题
KyaruChan的博客
02-28 2602
iframe标签满宽高时的滚动条问题
js实现iframe自动自适应高度的方法
10-24
有时，我们希望Iframe能根据其内部内容自动调整高度，以避免滚动条的出现，提供更好的用户体验。本篇文章将详细介绍如何使用JavaScript实现Iframe的自动自适应高度。 首先，理解基本概念。Iframe的`height`属性决定...
动态的改变IFrame的高度实现IFrame自动伸展适应高度
09-05
为解决这个问题，我们可以实现IFrame的自动伸展，使其高度能动态适应内部内容的高度，从而避免滚动条的出现。 动态改变IFrame高度的实现主要分为两种方法： **具体实现一：** 1. **JavaScript实现** 在IFrame子...
iframe根据页面内容自适应高度和宽度
09-03
然而，由于`iframe`的大小固定，当嵌入的页面内容高度或宽度超过`iframe`设定的尺寸时，可能会出现滚动条或者内容被截断的情况。为了解决这个问题，我们需要让`iframe`根据其内容自动调整高度和宽度。本篇文章将详细...
iframe内容高度 iframe自适应高度终极解决Iframe设置高度后无法缩小问题
06-03
然而，`<iframe>`的高度自适应问题常常困扰着开发者，尤其是当`<iframe>`内部的内容动态加载或者变化时，如何让`<iframe>`自动调整其高度以适应内容，而不会导致滚动条溢出或内容被截断，成为了一个常见需求。...
iframe窗口高度自适应的又一个巧妙实现思路
09-04
`iframe`的滚动条不仅影响用户体验，也可能导致页面布局不协调。本篇文章将详细介绍一种巧妙的实现`iframe`窗口高度自适应的思路。 首先，由于浏览器的同源策略限制，JavaScript无法直接跨域操作DOM元素，包括获取...
iframe设置高度为100%
weixin_34109408的博客
05-19 381
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;meta name="viewport" content="widt
iframe高度设置100%出现垂直滚动条
qq_16656959的博客
04-13 775
iframe = inline frame是内联元素，iframe后面有个看不见摸不着的行内空白节点，空白节点占据着高度,iframe与空白节点的基线对齐，导致了div被撑开 方法1： 设置iframe 的vertical-align:top; 方法2： 设置父div的font-size:0从而影响空白节点的line-heigh:0, 方法3： 把iframe改为块级元素 displ...
子元素高度占据父元素100%，为什么会出现滚动条？
weixin_60974764的博客
07-09 643
纵向滚动条出现？不，你不该出现！
iframe多级嵌套后，无论子iframe内部内容高度是否超过iframe，父级iframe都会出现滚动条的问题...
weixin_33713350的博客
10-10 1078
2019独角兽企业重金招聘Python工程师标准>>> ...
关于iframe的高度、滚动条问题
qq_34045989的博客
04-25 1439
<!--iframe 设置height 可以给iframe一个固定高度，(iframe内容可能不可预知，比如问题检索页)如果iframe里边内容超过给定高度，然后再iframe的body 设置 style="overflow-y:scroll;"--> <div class="content"> <div class="cont...
实现iframe的100%高度和宽度
luo的博客
07-10 619
body { margin: 0; /* Reset default margin / } iframe { display: block; / iframes are inline by default / background: #000; border: none; / Reset default border / height: 100vh; / Viewport-relative units */ width: 100vw; } 原文链接：https://blog.csdn.net/muzizo
html iframe高度全屏,全屏iframe的高度为100％
weixin_39622225的博客
06-19 2255
你可以使用框架作为以前的答案状态，但如果你坚持使用iFrames，下面的两个例子应该工作： 替代： 如上所示隐藏滚动2种select： 与第二个例子一起使用： 为了隐藏iFrame的滚动条，父项被设置为overflow: hidden隐藏滚动条，并且iFrame的宽度和高度达到150％，强制页面外的滚动条，因为body没有滚动条可能不会指望iframe超出页面的边界。 这隐藏了iFrame的全部滚...
iframe嵌套页面，无法获取外部浏览器滚动条高度
weixin_47067468的博客
06-09 351
iframe嵌套页面获取外部浏览器高度
iframe滚动条美化
最新发布
11-22
根据提供的引用内容，iframe滚动条的美化与iframe本身并没有关系，而是需要对包含iframe的页面进行滚动条美化。以下是两种实现方法： 1.使用CSS样式美化滚动条 ```css /*滚动条整体样式*/ ::-webkit-scrollbar { width: 10px; height: 10px; } /*滚动条轨道样式*/ ::-webkit-scrollbar-track { background-color: #f5f5f5; } /*滚动条滑块样式*/ ::-webkit-scrollbar-thumb { background-color: #000000; border-radius: 5px; } ``` 将上述代码添加到包含iframe的页面的CSS文件中，即可实现滚动条美化。 2.使用第三方插件美化滚动条 可以使用第三方插件，如perfect-scrollbar、nicescroll等，来实现滚动条美化。这些插件提供了丰富的滚动条样式和配置选项，使用起来非常方便。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值