代码改变世界

纯CSS实现iframe高度自适应，完美兼容各种浏览器，同域异域

2011-05-25 21:36  TeddyAtHTML5  阅读(1227)  评论(0)  编辑  收藏  举报

      最近做项目需要引用外部页面，在网上找的许多关于iframe高度自适应的文章，有的只能同域访问，有的可以实现异域，但是需要异域是可编辑的。对于我这种情况都不适用。而且，这些方法都需要用js。

      后来，我发现校内网上面的分享外部链接的情况和我的情况很类似，便钻研一下，看它是怎么实现的。哈哈，给我发现了。校内网没有用到任何JS，只需要纯CSS便完成这个功能。

    内容非常简单，直接看代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <style type="text/css">
        html, body, table, tbody, tr, td {
            width:100%;
            height:100%;
            overflow:hidden;
        }
        iframe {
            width:100%;
            height:100%;
            border:none;
        }
        </style>
    </head>
    <body>
        <table>
            <tbody>
                <tr style="height:40px;">
                    <td style="height:40px;background-color:red">
                    Header
                    </td>
                </tr>
                <tr>
                    <td>
                    <iframe src="http://www.douban.com">
                    </iframe>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>