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

qq85609655

浏览: 1073512 次
性别:
来自: 北京

最近访客更多访客>>

ssydxa219

yuanliangding

常好修

joeytang9118

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

html

在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>

分享到：