您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > 當(dāng)有<!DOCTYPE html時 iframe height

當(dāng)有<!DOCTYPE html時 iframe height

文章來源：365jz.com 點(diǎn)擊數(shù)：1104 更新時間：2010-12-31 15:18 參與評論

當(dāng)有<!DOCTYPE html時 iframe height 100% 問題,當(dāng)我調(diào)試運(yùn)行的時候，其 width=100% 生效了，但 height=100% 就無效，無論用 JavaScript 的方式修改還是直接設(shè)置其 height 屬性為100%，始終只有 200px 左右的高度。折騰了我半天，再經(jīng)過一番研究，終于找到答案了，結(jié)論如下：要使 <iframe> 標(biāo)簽的 height=100% 生效，一定要保證其父容器的 height=100% 有效（但我仍然想不通的是，為什么 width=100% 就沒問題呢？）?，F(xiàn)在舉例如下：

在 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=http://theartemis.cn/>
</body>
</html>

在上述代碼中，樣式代碼部分明確指出了 html, body 的 width 和 height 為 100%，這是必須的，隨后指出了 iframe 的 width 和 height 也為 100%，這里的意思是說 iframe 的 width 和 height 是相對于其父容器的 width 和 height 為 100%，這樣的方法既簡單又明了，IE、Firefox（火狐瀏覽器）、chrome（Google瀏覽器）均能順利通過。