iframe height 100% 无效问题解决（转）

最新推荐文章于 2024-05-07 18:16:38 发布

smb1987cs

最新推荐文章于 2024-05-07 18:16:38 发布

阅读量4.7w

点赞数 7

本文链接：https://blog.csdn.net/smb1987cs/article/details/19334279

版权

最近，利用 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浏览器）均能顺利通过。希望遇到此问题的同志不要再走弯路！

转自：http://blog.baiwand.com/?post=3

smb1987cs

关注

7
点赞
踩
11

收藏

觉得还不错? 一键收藏
15
评论
iframe height 100% 无效问题解决（转）

最近，利用 MapGuide 技术开发一个 WebGIS 的应用程序，其中用到了标签；可是当我调试运行的时候，其 width=100% 生效了，但 height=100% 就无效，无论用 JavaScript 的方式修改还是直接设置其 height 属性为100%，始终只有 200px 左右的高度。折腾了我半天，再经过一番研究，终于找到答案了，结论如下：要使标签的 height=100
复制链接

扫一扫