iframe height 100% 无效问题解决

最近,利用 MapGuide 技术开发一个 WebGIS 的应用程序,其中用到了 <iframe> 标签;可是当我调试运行的时候,其 width=100% 生效了,但 height=100% 就无效,无论用 JavaScript 的方式修改还是直接设置其 height 属性为100%,始终只有 200px 左右的高度。折腾了我半天,再经过一番研究,终于找到答案了,结论如下:要使 <iframe> 标签的 height=100% 生效,一定要保证其父容器的 height=100% 有效(但我仍然想不通的是,为什么 width=100% 就没问题呢?)。现在举例如下:

 

在 index.html 中的代码如下:

 

<!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">
<head>
    <title>iframe tag test</title>
    <style type="text/css">
        html, body
        {
            margin: 0px 0px;
            width: 100%;
            height: 100%;
        }
        iframe
        {
            margin: 0px 0px;
            width: 100%;
            height: 100%;
        }
    </style>

    <script type="text/javascript">
        function iframeHeight() {
            document.getElementById('iframeId').height="100%";
        }
    </script>

</head>
<body>
    <iframe id="iframeId" frameborder=0 scrolling=no
        src=http://www.google.com />
</body>
</html>

 

在上述代码中,样式代码部分明确指出了 html, body 的 width 和 height 为 100%,这是必须的,随后指出了 iframe 的 width 和 height 也为 100%,这里的意思是说 iframe 的 width 和 height 是相对于其父容器的 width 和 height 为 100%,这样的方法既简单又明了,IE、Firefox(火狐浏览器)、chrome(Google浏览器)均能顺利通过。希望遇到此问题的同志不要再 走弯路!


阅读本文后,您的心情是:
 
恶心
愤怒
强赞
感动
路过
无聊
雷囧
关注
知识共享许可协议
评论(2) 浏览(19070) 引用(0)
引用地址:http://blog.baiwand.com/tb.php?sc=621f59&id=3
Tags:
« HTML5分裂成两个标准 CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行 »

评论列表

  1. SunBanson 2014-09-02 17:35
    非常感谢您的内容,非常不错的研究,之前一直疑惑的框架隐藏后的边框问题也顺势解决了。
     
  2. lostgdi 2013-08-12 22:35
    谢谢你的信息
     

Blogger

  • blogger
  • 天之骄子
  • 职位:研发工程师
    铭言:
    阳光与欢乐同在,
    与我同在
    主页:
    blog.baiwand.com

分类目录

日志归档

主题标签

数据统计

  • 日志:151篇
  • 评论:45条
  • 碎语:264条
  • 引用:0条

链接表

随机日志 »

最新日志 »

最新评论 »

标签云 »

订阅Rss
sitemap