纯CSS实现iframe高度自适应，完美兼容各种浏览器，同域异域

最近做项目需要引用外部页面，在网上找的许多关于iframe高度自适应的文章，有的只能同域访问，有的可以实现异域，但是需要异域是可编辑的。对于我这种情况都不适用。而且，这些方法都需要用js。

后来，我发现校内网上面的分享外部链接的情况和我的情况很类似，便钻研一下，看它是怎么实现的。哈哈，给我发现了。校内网没有用到任何JS，只需要纯CSS便完成这个功能。

内容非常简单，直接看代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css">html, body, table, tbody, tr, td {width:100%;height:100%;overflow:hidden;}iframe {width:100%;height:100%;border:none;}</style></head><body><table><tbody><tr style="height:40px;"><td style="height:40px;background-color:red">Header</td></tr><tr><td><iframe src="http://www.douban.com"></iframe></td></tr></tbody></table></body></html>

转载于:https://www.cnblogs.com/teddyathtml5/archive/2011/05/25/2057372.html

纯CSS实现iframe高度自适应，完美兼容各种浏览器，同域异域相关推荐

纯css实现iframe高度自适应
当我们转载文章或者发布文章时经常会需要用iframe标签引入视频或者网页,但是用iframe标签引入视频最大的一个问题就是无法自适应高度,宽度不是什么大问题,只有我们在iframe标签中加入width ...
Iframe高度自适应（兼容IEFirefox、同域跨域）
在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固 ...
Iframe高度自适应（兼容IE/Firefox、同域/跨域）
在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固 ...
iframe html高度自适应,CSS实现iframe高度自适应示例
高度自适应的实现方法有不少了,今天我们以css iframe高度自适应示例来为各位引起一些js与jquery的例子,有兴趣的可以和小编一起来看看. 前因:某个项目为了统计效果,把咨询的页面窗口内嵌放进 ...
强迫症晚期患者：纯CSS实现div高度自适应浏览器。
我记得在学了网页自适应的内容后,每次写网页,力求宽高自适应.最后还是有一些困惑:写一个div给样式.(给定背景色和字体色是为了便于我们观察.) width:100%;background:white: ...
CSS完美实现iframe高度自适应（支持跨域）
https://blog.csdn.net/qq_32915337/article/details/79900222 Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用 ...
完美实现跨域Iframe高度自适应【Iframe跨域高度自适应解决方案】
Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的"BUG"就是iframe的高度无法自 ...
跨域iframe高度自适应(兼容IE/FF/OP/Chrome)
采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...
iframe高度自适应的6个方法
iframe内容未知,高度可预测这个时候,我们可以给它添加一个默认的CSS的min-height值,然后同时使用JavaScript改变高度.常用的兼容代码有: // document.domain ...

纯CSS实现iframe高度自适应，完美兼容各种浏览器，同域异域

纯CSS实现iframe高度自适应，完美兼容各种浏览器，同域异域相关推荐

最新文章

热门文章