1200字范文 > 纯CSS实现iframe高度自适应完美兼容各种浏览器同域异域

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

时间：2022-05-31 03:36:42

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

html, body, table, tbody, tr, td {

width:100%;

height:100%;

overflow:hidden;

}

iframe {

width:100%;

height:100%;

border:none;

}

</style>

</head>

<body>

<table>

<tbody>

Header

</td>

</tr>

<tr>

<td>

</iframe>

</td>

</tr>

</tbody>

</table>

</body>

</html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。

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