html5 iframe 无法滚动条,【HTML5】iframe滚动条问题
HTML 4.01 Transitional 标准
子页面不要表头
****** 去掉 iframe 横向滚动条或竖条
1. 在主页面加 iframe scrolling="yes" 或 "auto"
2. css 文件
body {
overflow-x : hidden; 去掉横条
overflow-y : hidden; 去掉竖条
}
父页面和子页面链接入 css 文件
3. 去掉子页面里的
(即不要表头)
4. 两个都去掉
**********************************************
资料:
GOOGLE到一些有用的资料:
[DIV+CSS]XHTML下的滚动条问题
1.xhtml下滚动条的颜色问题?
在原来的html的时候,我们可以这样定义整个页面的滚动条
body{
scrollbar-3dlight-color:#D4D0C8;
scrollbar-highlight-color:#fff;
scrollbar-face-color:#E4E4E4;
scrollbar-arrow-color:#666;
scrollbar-shadow-color:#808080;
scrollbar-darkshadow-color:#D7DCE0;
scrollbar-base-color:#D7DCE0;
scrollbar-track-color:#;
}
但是同样的代码,我们应用在 xhtml下就不起作用了,我相信好多好朋友也遇到过同样的问题
那么怎么才能在xhtml下应用滚动条样式呢?看下列代码
html{
scrollbar-3dlight-color:#D4D0C8;
scrollbar-highlight-color:#fff;
scrollbar-face-color:#E4E4E4;
scrollbar-arrow-color:#666;
scrollbar-shadow-color:#808080;
scrollbar-darkshadow-color:#D7DCE0;
scrollbar-base-color:#D7DCE0;
scrollbar-track-color:#;
}
这段代码和上一段唯一的不同就是在css定义的元素上,一个是body一个是html。我们再测试一下,把html页面的
"body"修改成"html"测试一下,发现依然可以实现效果。那到底是为什么呢?
在html和xhtml都通过,因为*就是定义页面上的任何标签当然也包括了“html”这个标签。
(ps:其实与其说是html与xhtml的区别到不如说是有无XHTML 1.0 transitional doctype的区别,但是如果你把页面的
XHTML 1.0 transitional doctype去掉的话,那么这个页面就没有doctype,默认的显示方式就是html4.01,不过
你要把XHTML 1.0 transitional doctype修改成HTML 4.01 doctype同样页面定义body也不会有效果的,虽然
这个页面的标准是html 4.01)
2.xhtml下frame页面横向滚动条的问题?
在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个
bug,在firefox上是正常的,出现的原因是其对XHTML 1.0 transitional doctype的解释缺陷.
对于这个bug一般有3种解决方案,
方法1:
代码:
html { overflow-y: scroll; }
原理:强制显示ie的垂直滚动条,而忽略水平滚动条
优点:完全解决了这个问题, 允许你保持完整的XHTML doctype.
缺点:即使页面不需要垂直滚动条的时候也会出现垂直滚动条。
方法2:
代码:
html { overflow-x: hidden; overflow-y: auto; }
原理:隐藏横向滚动,垂直滚动根据内容自适应
优点:在视觉上解决了这个问题.在不必要的时候, 未强制垂直滚动条出现.
缺点:只是隐藏了水平滚动条,如果页面真正需要水平滚动条的时候,
屏幕以外的内容会因为用户无法水平滚动,而看不到。
方法3:
代码:
body { margin-right: -15px; margin-bottom: -15px; }
原理:这会在margin的水平和垂直方向上添加一个负值, IE添加了该精确数值后, 便会去除对滚动条的需求假象.
优点:在视觉上解决了这个问题.,垂直滚动根据内容自适应
缺点:由于"人为创建"了15px的外边距(margin), 所以无法使用该填充过的屏幕区域.
以上摘自:
附:强制的滚动条:
问题中的"修复"该bug的技术, 同样可以用于其它目的. 利用CSS, 你可以有效地在Mozilla Firefox和Internet Explorer中显示或者隐藏垂直及水平滚动条.
强制显示滚动条:
html { overflow: scroll; }
强制隐藏滚动条:
html { overflow: hidden; }
隐藏IE的水平滚动条:
html { overflow-x: hidden; }
隐藏IE的垂直滚动条:
html { overflow-y: hidden; }
强制显示IE的水平滚动条:
html { overflow-x: scroll; }
强制显示IE的垂直滚动条:
html { overflow-y: scroll; }
强制显示Mozilla的水平滚动条:
html { overflow:-moz-scrollbars-horizontal; }
注意: 仅仅强制显示水平滚动条. 也就是说, 即使需要显示垂直滚动条时, 垂直滚动条也不会出现.
强制显示Mozilla的垂直滚动条:
html { overflow:-moz-scrollbars-vertical; }
注意: 仅仅强制显示垂直滚动条. 也就是说, 即使需要显示水平滚动条时, 水平滚动条也不会出现.
html5 iframe 无法滚动条,【HTML5】iframe滚动条问题相关推荐
- html5 iframe 无法滚动条,iframe嵌入的页面没有滚动条
怎么样iframe没有滚动条 页面有滚动条 iframe没有滚动条 scrolling="No"这个去掉了但是页面超过了屏幕,应该有不是到你只什么意思哦frameborder=&q ...
- html框架页面不允许滚动条,关于html:使用iframe时如何摆脱双滚动条?
我已经在网上看到了这个问题,所有建议的解决方案都不适用于我,所以我想我会来这里的. 我有一个包含iframe的页面.页面顶部是一个下拉菜单,页面其余部分是iframe.就像我确定其他所有人一样,该想法 ...
- 【vue中实现iframe 自适应高度和去除滚动条】
项目场景: vue中实现iframe 自适应高度和去除滚动条 解决方案: html <iframe:src="tempSrc"width="100%":h ...
- 在HTML5中有什么可以替代iFrame
最佳解决方法 通常有4种方法可以将HTML嵌入到网页中: <iframe> iframe的内容完全位于当前页面不同的上下文中.虽然这是一个很棒的功能,而且是不同浏览器版本之间兼容最好的,但 ...
- html5自动出现滚动条,html展示滚动条 html 自动显示横向滚动条
html 怎么去掉网页的滚动条 然后给子div添加内容,为了让滚动条可以实现,尽量多添加一些内容. html 自动显示横向滚动条 假设一个页面上有一个DIV,他的宽度设为了width:70%:怎样实现 ...
- iframe优缺点、X-Frame-Options(如何防止点击劫持、设置页面是否能作为iframe嵌套)、iframe长轮询和应用场景
目录 iframe优缺点 优点 缺点 为什么尽量少用iframe iframes阻塞页面加载,影响网页加载速度 唯一的连接池 解决 iframe应用场景 iframe长轮询 iframe跨域使用 防嵌 ...
- html div 隐藏滚动条样式,div滚动条样式隐藏与显示
DIV滚动条样式是可以设置的,CSS滚动条同样也可以显示与隐藏,对div设置滚动条,设置其横向滚动条和纵向滚动条样式应该怎么做呢? 要设置CSS滚动条样式,需要用到overflow-y和overflo ...
- html5外链代码,html5关于外链嵌入页面通信问题
这篇文章主要介绍了html5关于外链嵌入页面通信问题(postMessage解决跨域通信),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学 ...
- html5网页制作技巧,HTML5 网页制作技巧
本文总结自由人民邮电出版社出版的<HTML.CSS.Javascript网页制作>. 总结进行学习,并分享给同样编写HTML5的朋友. 1:背景音乐的添加 2:每隔一定时间的自动刷新网页 ...
- extjs给panel添加滚动条_ExtJs Panel 滚动条设置
设置autoscroll:true同时出现横向和纵向滚动条. 不要设置autoscroll属性,或者autoscroll:false,然后设置bodyStyle : 'overflow-x:hidde ...
最新文章
- SQL Server表分区的NULL值问题
- 【中级软考】什么是McCabe测量法(McCabe复杂性度量、环路度量。计算有向弧数、结点数、强连通分量个数)
- boost windows编译
- CSS3 线性渐变背景的过渡效果
- DDL 操作数据表 查询表
- 微信 SDK 升级,全面支持异步缓存接口, .NET 3.5/4.0版本5月1日起停止更新
- linux下tomcat8安装详解详解
- linux下iptables详解
- 此系统上未启用启动项_解决系统死机的7种方法,维修电脑必备技巧,你知道几条...
- 世界500强面试题----反应能力
- cuda环境安装--windows离线安装
- .NET 函数调用反转
- html excel 在线编辑,利用js实现在线编辑excel表格代码
- upc组队训练第十九场
- 电子病历质控系列-医疗质量工作任务003
- 基于Android studio设计的APP通过esp8266在AP模式下控制STM32单片机LED灯
- 计算机组成原理之CPU、外存、内存之间的关系
- IOS应用内及应用之间跳转URL
- ubuntu安装cad快速看图linux版
- 求有多少个连续字串中所有的字母都出现了偶数次