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

来源：互联网发布：ac130在越南战争知乎编辑：程序博客网时间：2024/05/16 08:34

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