非js实现iframe高度自适应实现

最新推荐文章于 2022-01-05 11:06:13 发布

rainkid

最新推荐文章于 2022-01-05 11:06:13 发布

阅读量8.6k

点赞数

分类专栏： web js iframe自适应文章标签： iframe 测试 xhtml scroll html border

本文链接：https://blog.csdn.net/rainkid/article/details/6778175

版权

web js iframe自适应专栏收录该内容

0 篇文章 0 订阅

订阅专栏

在baidu输入iframe高度自适应，文章很多，问问题的人也非常之多，解决办法也是五花八门，但基本上都是用js获取子页面高度再设置iframe的高度来实现的，这种实现方式，维护成本比较高，而且兼容性也很难保证，此文提供兼容浏览器的非js实现iframe高度自适应的方法：

iframe.html代码实现如下：

<!--此处doc声明不可修改-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.0 Transitional//EN">
<html>
<head>
<title>iframe自适应</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">  
html,body{ width:100%; height:100%;}  
body {   
        margin-left: 0px;  
        margin-top: 0px;  
        margin-right: 0px;  
        margin-bottom: 0px;  
}  
</style>
</head>
<body>
<!--table设置高度为100%，宽度为100%-->
<table width="100%" height="100%" border="1" style="width:100%; height:100%" cellspacing="0" cellpadding="0">
    <tr>
        <td style="width:100%; height:100%">
            <!--iframe高度设置为100％，宽度设置为100％-->
            <iframe src="test.html"  style="width:100%; height:100%;overflow:scroll" frameborder="no" scrolling="no"></iframe>
        </td>
    </tr>
</table>
</body>
</html>

test.html内容如下：

<html>
<head>
<title>测试页面</title>
</head>
<body>
	测试内容；<br/>
	测试内容；<br/>
	测试内容；<br/>
	测试内容；<br/>

	测试内容；<br/>
	测试内容；<br/>
	测试内容；<br/>
	测试内容；<br/>
	测试内容；<br/>
	测试内容；<br/>

	测试内容；<br/>
	测试内容；<br/>
	测试内容；<br/>
	测试内容；<br/>
	测试内容；<br/>
	测试内容；<br/>

	测试内容；<br/>
	测试内容；<br/>
	测试内容；<br/>
	测试内容；<br/>
	测试内容；<br/>
	测试内容；<br/>

	测试内容；<br/>
	测试内容；<br/>
	测试内容；<br/>
	测试内容；<br/>
	测试内容；<br/>
	测试内容；<br/>

	测试内容；<br/>
	测试内容；<br/>
	测试内容；<br/>
	测试内容；<br/>
	测试内容；<br/>
	测试内容；<br/>

	测试内容；<br/>
	测试内容；<br/>
</body>
</html>