您现在的位置: 365建站网 > 365学习 > 当有<!DOCTYPE html时  iframe height 

当有<!DOCTYPE html时  iframe height 

文章来源:365jz.com     点击数:1029    更新时间:2010-12-31 15:18   参与评论

当有<!DOCTYPE HTML时  iframe height 100% 问题,当我调试运行的时候,其 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>
</head>
<body>
    <iframe id="iframeId" frameborder=0 scrolling=no src=https://www.365jz.com/>
</body>
</html>

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

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (1029人查看6条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------