admin
管理员
管理员
  • UID1
  • 粉丝2
  • 关注2
  • 发帖数339
  • 社区居民
  • 忠实会员
  • 原创写手
阅读:4162回复:0

iframe 100%高度的自适应

楼主#
更多 发布于:2013-09-07 16:25
分享到:
方法一:
1.设置iframe父容器的高度值,100%就能生效(由此猜测默认情况下iframe的父容器高度是某个比较小的值,因此显示出来高度比较小)
2.如果是脚本动态创建的,iframe.style.height=document.body.scrollHeight,如果document.body.scrollHeight没用,可以使用screen.availHeight
在网上搜到很多iframe自适应高度的文章。我们只需要让iframe的高度跟浏览器显示区域的高度一样就行了,跟iframe自适应高度是不一样的。
<iframe id="iFrame1" name="iFrame1" width="100%" onload="this.height=iFrame1.document.body.scrollHeight" frameborder="0" src="index.htm"></iframe>
是要让iframe的高度跟iframe里面的内容高度一致
方法二:
1.想让iframe的高度为100%,必须让其父标签的高度为100%,比如html、body都要100%才行。
2.如果iframe
处在一个表格内,你会发现,只是设置html与body为100%还是不行的,即便是设置table为100%也是不行。在这种情况下,需要把页面头部的
“<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">”删除掉就ok了。
今天在处理页面时,又遇到了iframe在表格内高度不能100%的情况,除了第二种删除头部代码就没有其他的办法了吗?仔细想了下,iframe如果能100%高度。其父标签的高度一定是100%,但是html、body、table都设置了,其下面的iframe还是不能100%,忽然想到了TD标签,怎么就忽略了它呢,把td设置100%后,iframe完美了。
游客

返回顶部