Iframe的强大功能偶就不多说了，它不但被开发人员经常运用，而且黑客们也常常使用它，总之用过的人知道它的强大之处，但是Iframe有个致命的“BUG”就是iframe的高度无法自动适应，这一点让很多人都头疼万分。百度或是谷歌一下，确实很多解决方法，但尝试一下，会发现问题很多：浏览器兼容性差，不能自适应，仅支持同域Iframe等诸多问题，尤其是跨域Iframe高度自适应问题。网上根本找不到一种可行的方案（唯一有一种提到加入代理页面的，经过测试发现无用）。难道真的没有一种可行的解决方案了吗？ No，下面小鸣子和大家分享一种强大的方法，代码如下：

<html>
<head>
<style>
body {margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;overflow: hidden;}
</style>
</head>

<body>
<iframe src=\'#\'" //hi.baidu.com/' width='100%' height='100%' frameborder='0' name="_blank" id="_blank" ></iframe>

</body>

</html>

代码强大之处：

1. 该方法完美兼容IE6，7，8 ，Fire fox,chrome，opera 等主流的浏览器；

2.同域，跨域皆支持；

3.不调用任何JS脚本；

注意三点.

1. 文件开头不能是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

必须 是<html>开头

2. body样式中的 overflow: hidden; 绝对不对省略；

3.Iframe 中的 height='100%' 以及 滚动条不能设为no(默认是yes，不用设置即可)

好了，马上试试吧。100%不会让你失望。

CSS完美实现iframe高度自适应（支持跨域）的更多相关文章

  1. iframe高度自适应（同域）

    今天解决了iframe高度自适应的问题,不过这只是同域下的页面嵌入,以下是代码: function SetCwinHeight(){ var iframeid = document.getElemen ...

  2. 完美实现跨域Iframe高度自适应【Iframe跨域高度自适应解决方案】

    Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的“BUG”就是iframe的高度无法自动适应,这一点让很多 ...

  3. 谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法，跨域调用JS不再是难题！

    谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个 ...

  4. 跨域iframe高度自适应(兼容IE/FF/OP/Chrome)

    采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...

  5. 跨域iframe高度自适应（兼容IE/FF/OP/Chrome）

    采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...

  6. Iframe高度自适应（兼容IEFirefox、同域跨域）

    在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固 ...

  7. Iframe高度自适应（兼容IE/Firefox、同域/跨域）

    在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固 ...

  8. Iframe 高度自适应 example （跨子域实现）

    跨子域的iframe高度自适应 比如 'https://www.kzwr.com/topics/baidu' 嵌入了 'http://pan.kzwr.com/',这种跨子域的页面,实现起来也比较简单 ...

  9. 跨子域的iframe高度自适应

    一.跨子域的iframe高度自适应 比如 'a.jd.com/3.html' 嵌入了 'b.jd.com/4.html',这种跨子域的页面 3.html 1 2 3 4 5 6 7 8 9 10 11 ...

随机推荐

  1. 利用python的爬虫技术爬取百度贴吧的帖子

    在爬取糗事百科的段子后,我又在知乎上找了一个爬取百度贴吧帖子的实例,为了巩固提升已掌握的爬虫知识,于是我打算自己也做一个. 实现目标:1,爬取楼主所发的帖子 2,显示所爬去的楼层以及帖子题目 3,将爬 ...

  2. CSS.04 -- 浮动float、overflow、定位position、CSS初始化

    标准流:行内/行内块元素横向有序排列 : 块元素纵向有序排列. 浮动:Float 语法:float:left/right :  设置浮动的元素,脱离标准流 浮动的框可以向左或向右移动,直到它的外边缘碰 ...

  3. Python快速入门（5）

    os模块:操作系统接口 应该用 import os 风格而非 from os import * .这样可以保证随操作系统不同而有所变化的 os.open() 不会覆盖内置函数 open() 在使用一些 ...

  4. 第一章：shiro简介

    1.1 简介 Apache Shiro是java的一个安全框架,相当简单,没有Spring Security功能强大,但是实际工作中大多使用shiro就够了.可以帮助我们完成:认证,授权,加密,会话管 ...

  5. 一个关于Python正则表达式的快速使用手册

    一直在纠结自己的博客到底应该写一些什么东西,这几天发现自己的正则用的不是很熟练,于是想要写一篇关于正则表达式的博客,目的就是为了让自己以后要用而又不会的时候不至于像无头苍蝇一样到处乱撞. 有些人在碰到 ...

  6. 安装Postgresql

    p.MsoNormal,li.MsoNormal,div.MsoNormal { margin: 0cm; margin-bottom: .0001pt; line-height: 150%; fon ...

  7. 在Windows下安装redis扩展和memcached扩展

    一.php安装redis扩展   1.使用phpinfo()函数查看PHP的版本信息,这会决定扩展文件版本       2.根据PHP版本号,编译器版本号和CPU架构, 选择php_redis-2.2 ...

  8. quartus ii有符号数的问题（待完善）

    1.有符号数是以补码的形式存储的,在modelsim仿真时,补码自动转换为有符号的十进制数. 2.关于截位的问题: 当只取寄存器中的其中m位时,这时候取得的数是按照无符号位来处理的? 3.reg型数据 ...

  9. 使用opencv实现自定义卷积

    对图像进行卷积是图像处理的基本操作,最近在研究图像滤波,经常要用到自定义卷积,所以实现了一下 #include "opencv2/imgproc/imgproc.hpp" #inc ...

  10. ios animation 动画效果实现

    1.过渡动画 CATransition CATransition *animation = [CATransition animation]; [animation setDuration:1.0]; ...