去除iframe内滚动条

最新推荐文章于 2024-11-06 14:05:01 发布
原创 最新推荐文章于 2024-11-06 14:05:01 发布 · 4.1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#iframe 滚动条

本文介绍了两种在iframe中隐藏滚动条的方法：一是通过设置iframe标签的scrolling属性为no；二是利用CSS对iframe子页面的body进行样式设置，具体包括隐藏横向或纵向滚动条。

iframe去滚动条应该有多种方式，在此简单总结两种：

1.在<iframe>标签中添加scrolling属性，值为yes时，有滚动条，值为no时无滚动条。这种方法简单，但是页面估计不怎么好看。

2.在iframe链接的子页面的body中，

隐藏横向滚动条：

 body{
     overflow: scroll;
     overflow-x: hidden;
     overflow-y: auto;

}

隐藏纵向滚动条：

body{
     overflow: scroll;
     overflow-x: auto;
     overflow-y: hidden;

}

但是有一点注意的就是需要将子页面的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">给删除掉，否则滚动条的auto不会起作用，而是一直显示。

 

JS去除iframe滚动条的方法
10-24
主要介绍了JS去除iframe滚动条的方法,涉及javascript操作iframe中属性的技巧,非常具有实用价值,需要的朋友可以参考下
JavaScript中关于iframe滚动条的去除和保留
11-27
下面通过本文给大家介绍下JavaScript中关于iframe滚动条的去除和保留的实现方法。一起看看吧！ iframe嵌入页面后，我们有时需要调整滚动条，例如，去掉全部的滚动条，去掉右边的滚动条且保留底下的滚动条，去掉底下...
去掉iframe滚动条（好使！）
weixin_45897915的博客
04-09 1万+
iframe嵌入页面后，我们有时需要调整滚动条，例如，去掉全部的滚动条，去掉右边的滚动条且保留底下的滚动条，去掉底下的滚动条且保留右边的滚动条。那么我们应该怎么做呢？ 一：去掉全部的滚动条 第一个方法： iframe 有一个scrolling属性，它有 auto , yes , no 这三个值。 scrol...
iframe去掉滚动条
bansong2170的博客
09-02 295
<iframe name="leftframe" marginwidth=1 marginheight=1 src="leftmenu.asp" frameborder=no width="100%" scrolling="no" height=100%></iframe> 转载于:https://www.cnblogs.com/VirtualLive/arc...
如何去掉iframe框架自带滚动条
热门推荐
weixin_40607363的博客
12-18 5万+
1、去掉底下的滚动条且保留右边的滚动条 在嵌入的页面里设置 body{overflow-x：hidden；overflow-y：auto；} 2、：去掉右边的滚动条且保留底下的滚动条        如果只想保留底下的滚动条，那么可以在嵌入的页面里设置 body{overflow-x：auto ; overflow-y：hidden；} 3、 去掉全部的滚动条 第一个方法：
网页iframe框架自动适应高度且去除滚动条
cfjbcg的博客
06-05 1444
③iframe的高度自适应不仅仅是指刚加载进来时，也有可能嵌入内容的高度会随点击变化（如：下拉菜单，左侧导航栏等）①iframe的高度始终等于嵌入页面内容的高度，而不是屏幕的高度。④页面可能同时嵌入多个iframe。②右侧不允许出现两个滚动条。
layer弹出层 iframe层去掉滚动条的实例代码
10-18
在这个问题中，我们关注的是如何在layer弹出层中的iframe层去除滚动条，以保持页面的整洁和用户体验。 首先，让我们深入理解一下涉及到的几个概念： 1. **layer**：Layer是基于jQuery的一个轻量级的弹窗插件，提供...
Iframe去除滚动条
ceocyo的专栏
04-16 1047
最近工作中遇到页面内嵌iframe滚动条去重的问题，由于项目中用到jq，就用jq解决 …….分享出来 。     03   外层html结构：  04    05 menu     06   07 08    09 #加入到iframe页面的js,可以加入到js文件，其他文件引用。  10     /**  11  * 完美解决iframe双滚动条显示 
iframe关于滚动条的去除和保留
weixin_30555753的博客
11-16 671
iframe嵌入页面后，我们有时需要调整滚动条，例如，去掉全部的滚动条，去掉右边的滚动条且保留底下的滚动条，去掉底下的滚动条且保留右边的滚动条。那么我们应该怎么做呢？ 一：去掉全部的滚动条 第一个方法： iframe 有一个scrolling属性，它有 auto , yes , no 这三个值。 s...
怎么去掉iframe的滚动条？
weixin_30483013的博客
08-26 233
<iframe name="123" src="YNJD/ynjd.htm" frameborder="0" width="528" height="370" scrolling="auto"></iframe> <iframe name="123" src="YNJD/ynjd.htm" frameborder="0" width="528" height="37...
【我不熟悉的css】去掉iframe的滚动条
有一棵树的博客
11-15 2913
【我不熟悉的css】去掉iframe的滚动条
去掉iframe滚动条
weixin_42758129的博客
11-03 1459
去掉iframe滚动条 <iframe class="RuoYi_iframe" name="iframe0" width="100%" height="100px" data-id="/webindex/titletop" th:src="@{/webindex/menubar}" ></iframe> <iframe class="RuoYi_if...
iframe去掉双滚动条
qq_43437571的博客
08-03 2015
出现的问题： 页面一个滚动条，iframe引用的内容里有一个滚动条，非常难看。 去掉双滚动条 实现思想： 子页面（即被引用页面）通过posyMessage把高度传给父页面（即引用页面，有iframe），父页面接收高度，重置本页面高度。 代码如下： 子页面： <div ref="son1"> <ul> <li>多写一点，增加高度</li><!-- 多写一点，增加高度 --> </ul> </div> mou
iframe窗口去掉滚动条自适应浏览器大小
ResumeProject的博客
09-06 660
iframe窗口去掉滚动条自适应浏览器大小
去掉iframe横向滚动条
zhaoxiaofei0929的专栏
05-27 569
2010年01月22日 星期五 04:59 P.M.主页面加IFRAME SCROLLING="YES"子页面让竖条消失: 让横条消失: 还要去掉子页面里的http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">两个都去掉   iframe自动适应页面大小JS函数
最简单的方法实现去iframe滚动条
wangsong76的专栏
06-29 1011
该文也可以说是一个iframe自适应大小的折中解决办法。 iframe出现滚动条的原因是，body里面的内容的高度大于了iframe的高度，所以会出现滚动条。 解决办法： 采用Jquery从iframe嵌套的页面中获取一个高度值，在iframe的父窗口中的onload事件中更新iframe的高度。 具体实现代码： 父页面： [code="html"] function Set...
iframe 出现两条滚动条,取消iframe滚动条
NiHao___的博客
11-06 578
height不要100vh 或者100%,获取屏幕高度并赋值给iframe。
iframe去除滚动条
最新发布
10-18
<think>我们正在讨论如何去除iframe的滚动条。根据引用[^1]的内容，我们需要确保文档类型声明（DOCTYPE）不会导致滚动条一直显示（即auto不起作用）。但用户真正的需求是去除iframe的滚动条，所以我们需要提供几种常见的方法。 常见的方法有： 1. 在iframe标签上设置scrolling="no"属性（注意：HTML5中已废弃，但可能仍有效） 2. 使用CSS样式：在iframe标签上应用样式`style="overflow: hidden;"`，或者通过外部CSS设置。 3. 如果iframe内容可以控制，也可以在内容页面（即iframe内部的页面）设置body的overflow为hidden。 但是，引用[^1]提到，DOCTYPE声明可能导致滚动条一直显示，因此如果使用上述方法无效，可能需要检查DOCTYPE声明。但通常，我们更推荐使用CSS方法。 因此，我们可以给出以下解决方案： </think>根据您的需求，以下是去除 iframe 滚动条的完整解决方案： ### 1. **设置 iframe 的 scrolling 属性（推荐）** 在 iframe 标签中直接添加 `scrolling="no"` 属性： ```html <iframe src="your-page.html" scrolling="no"></iframe> ``` 此方法兼容大多数浏览器，但注意 HTML5 已废弃该属性（现代浏览器仍支持）[^1]。 ### 2. **使用 CSS 隐藏滚动条** 通过 CSS 设置 iframe 的溢出样式： ```css iframe { overflow: hidden !important; /* 强制隐藏滚动条 */ display: block; /* 避免内联元素间距问题 */ } ``` 或在 HTML 中内联应用： ```html <iframe src="your-page.html" style="overflow: hidden; display: block;"></iframe> ``` ### 3. **修改 iframe 内容页的样式** 如果可控制 iframe 内部页面，在内部页面添加： ```css body, html { overflow: hidden !important; /* 隐藏内容页滚动条 */ margin: 0; /* 消除默认边距 */ padding: 0; } ``` ### 4. **关键注意事项** - **DOCTYPE 声明问题**：如引用[^1]所述，避免使用 `XHTML 1.0 Transitional` 等旧版 DOCTYPE，否则可能导致 `overflow:auto` 失效。推荐使用： ```html <!DOCTYPE html> <!-- HTML5 标准声明 --> ``` - **尺寸适配**：隐藏滚动条后需显式设置 iframe 尺寸： ```html <iframe src="..." width="100%" height="500px"></iframe> ``` ### 示例代码 ```html <!DOCTYPE html> <!-- 使用 HTML5 DOCTYPE --> <html> <head> <style> iframe { overflow: hidden; width: 100%; height: 400px; border: 1px solid #ccc; } </style> </head> <body> <iframe src="content.html"></iframe> </body> </html> ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值