页面内嵌入iframe出现滚动条

禁用iframe滚动条
最新推荐文章于 2025-07-03 13:25:54 发布
原创 最新推荐文章于 2025-07-03 13:25:54 发布 · 6.1k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css

本文介绍了如何通过设置iframe属性来避免在嵌入页面时显示滚动条。提供了具体的代码示例，帮助开发者解决网页布局问题。

一、问题出现原因

iframe可以在原有的页面中嵌入一个新的页面，在所嵌入的新的页面中会出现相关的滚动条。

二、问题解决方案

直接控制iframe框架，使其不能出现滚动条。具体相关的代码如下所示：

<iframe :src="srcUrl" frameborder="0" scrolling="no">
最低0.47元/天 解锁文章
使用Iframe标签嵌套的页面滚动条
weixin_44548473的博客
07-18 4559
开发工具与关键技术： Vs 、使用Iframe标签嵌套的页面滚动条 作者：木有窝的鸟~小通 撰写时间：2019年7月17日 见过滚动条的小窗口吗，出现滚动条可以根据屏幕的大小来设置。一般iframe标签可以用于页面嵌套。平时写的小窗口也可以用iframe标签来写。那么在页面嵌套中呢，它可以设置宽度，而设置比较小的宽度的时候页面超出部分会出现滚动条。正因为如此，其实运用也比较广泛。 1、 为了节省视...
精选资源
iframe高度自适应及隐藏滚动条的实例详解
01-21
iframe高度自适应及隐藏滚动条的实例详解 在工作中，我们可能会遇到自己公司和其他的公司达成合作关系，从而共同开发某个项目。而这时候，我们可能就需要在自己的网站上嵌入别人做好的页面。而这种情况下，我们一般...
iframe的滚动条问题：显示隐藏滚动条.doc
08-22
iframe的滚动条问题：显示隐藏滚动条.doc
页面中嵌套iframe导致页面出现滚动条
程先生的博客
05-30 3978
经过查询发现，是因为iframe元素不是标准的块级元素，导致虽然设置了height: calc(100% - 60px);然后通过控制台查看高度也确实没有问题。但是就是出现了滚动条，这样的话，就只能通过设置iframe为块级元素来确定了。如果大家想要自己测试一下的话，可以下载下面的代码，然后通过对29行中，display:block;的注释和非注释来看下具体的表现形式；页面头部一个固定的div元素，下面是一个iframe嵌套的页面。但是发现页面会出现滚动条。
iframe出现滚动条问题
前端
08-12 8733
问题描述 .parent设定了高度，设置iframe height：100%,通过浏览器观察发现，外层div与iframe高度相同，为什么出现滚动条，发现没有padding/margin的影响 <div class="parent"> <iframe frameborder="no" style="width:100%;height:100%;" src="https://w...
完全搞定iframe（框架）里的滚动条！（一）
热门推荐
xpnew的技术blog
05-07 1万+
 完全搞定iframe（框架）里的滚动条！（一）说明：1、本文参考了网络上大量资料，本人在此深表感谢！2、本文假设读者，有一定的HTML、CSS、JS基础。3、本文讨论的目标是，通过A页面里的标记引用B网页之后，在A页面上出现滚动条这种情况的几种解决办法。4、因为篇幅的关系，文章被分成了两部分。通常情况下，（一）就能解决你的问题，（二）将会深入探讨这个问题和相关的解决方案。5、如果你觉得我啰嗦
最简单的方法实现去iframe滚动条
wangsong76的专栏
06-29 1011
该文也可以说是一个iframe自适应大小的折中解决办法。 iframe出现滚动条的原因是，body里面的内容的高度大于了iframe的高度，所以会出现滚动条。 解决办法： 采用Jquery从iframe嵌套的页面中获取一个高度值，在iframe的父窗口中的onload事件中更新iframe的高度。 具体实现代码： 父页面： [code="html"] function Set...
JS去除iframe滚动条的方法
10-24
去除iframe滚动条的一种常见做法是通过JavaScript修改iframe的属性。在给定文件中，介绍了如何通过操作`scrolling`属性来实现这一目标。`scrolling`属性是一个用于控制是否显示滚动条的属性。在HTML标准中，它可以...
JavaScript中关于iframe滚动条的去除和保留
11-27
下面通过本文给大家介绍下JavaScript中关于iframe滚动条的去除和保留的实现方法。一起看看吧！ iframe嵌入页面后，我们有时需要调整滚动条，例如，去掉全部的滚动条，去掉右边的滚动条且保留底下的滚动条，去掉底下...
layer弹出层 iframe层去掉滚动条的实例代码
10-18
在这个问题中，我们关注的是如何在layer弹出层中的iframe层去除滚动条，以保持页面的整洁和用户体验。 首先，让我们深入理解一下涉及到的几个概念： 1. **layer**：Layer是基于jQuery的一个轻量级的弹窗插件，提供...
页面＜iframe height=‘100%‘ /＞时有纵向滚动条
最新发布
qnxb0628的博客
07-03 641
iframe=inline iframe它是一个内联元素，默认是跟 baseline 对齐的，iframe 后面有个看不见摸不着的行。从而影响空白节点的 line-height 是 0，即不占高度。，空白节点占据着高度，iframe与空白节点的基线对齐，导致了div被撑开，从而出现滚动条。第三种：改变 iframe 的内联元素性质，改为：display: block;第一种：设置 iframe 的 vertical-align: top;最后：个人的一点学习记录，<如有疏漏或谬误，望码友能不吝赐教~>
iframe显示滚动条
NRapid&JRapid
01-11 1万+
子页面通过iframe加载，出现了竖向滚动条 最后查出原因：文档申明 iframe有滚动条的页面的文档申明 改成如下就行了 如果一定要html5的形式的话，试下以下方法 1、隐藏父页面iframe滚动条：   主要是overflow: hidden; （scroll显示 auto根据内容动态显示 hidden不显示）  2、去掉子页面B 的Transitional//EN文档
iframe 出现两条滚动条,取消iframe滚动条
NiHao___的博客
11-06 579
height不要100vh 或者100%,获取屏幕高度并赋值给iframe。
网页嵌入iframe的使用删除滚动条
qq_32810733的博客
03-25 1019
在开发项目过程中遇到的使用iframe嵌入logo和版权信息页面时遇到页面内内嵌滚动条的状况；虽然之前遇到过但是许久不用又被这个问题折腾了一下，特此记录；使用scrolling="no"可以去除滚动条；顺带的auto属性代表在需要的情况下出现滚动条，为默认值；yes则表示不管需不需要始终显示滚动条。...
关于iframe的页面加载出现滚动条的问题
分享日常bug
11-28 1605
【代码】关于iframe的页面加载出现滚动条的问题。
iframe的滚动条
tyinopx的专栏
11-26 1584
iframe的滚动条很难看，很多时候需要自动调整高和宽 扩展到使页面显示正常。 搜索了一下，以下是解决办法： function iframe_resize() { /方法一 document.getElementById("iframe_resume").style.height= iframe_resume_name.document.body.scrollHeight; // IE7 和Firefox 都可以 document.getElementById("ifr
iframe里面的内容有滚动条，且iframe高度以它为准及扩展
幸福有多远
12-12 536
<style> #tAmMAPFtP4rFjcbO_context{ overflow: visible;//有滚动条的盒子 } </style> <script> function IFrameResize(){ setTimeout(function(){ let h = ...
iframe嵌入报表滚动条问题
Datainside的博客
10-24 542
iframe嵌入,报表滚动条,自适应高度,调整iframe高度,滚动条样式,滚动条设置
iframe自适应高度无滚动条嵌入页面实现方案
解决此问题的关键在于“动态高度调整”，即让外部`<iframe>`的高度随着其内部文档内容的实际高度自动变化，从而避免内部滚动条的出现，并使整个嵌入区域无缝融合进主页面布局之中。要实现这一点，单纯依靠CSS无法...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值