系统a通过iframe形式嵌套b系统test页面,iframe宽高如何跟随父页面div 自适应
时间: 2023-08-11 08:19:23 浏览: 126
iframe 多层嵌套 无限嵌套 高度自适应的解决方案
如果要让iframe的宽高跟随父页面的div自适应,可以使用CSS中的百分比单位或者JavaScript来设置iframe的宽高。
CSS百分比单位:
1. 设置父级div的宽高为固定值或百分比,如width: 100%; height: 500px;或width: 50%; height: 50%;
2. 在父级div中嵌套一个iframe,设置iframe的宽高为100%。
例如:
```html
<div style="width: 100%; height: 500px;">
<iframe src="test.html" style="width: 100%; height: 100%;"></iframe>
</div>
```
JavaScript:
1. 获取父级div的宽高,使用JavaScript设置iframe的宽高。
例如:
```html
<div id="parent" style="width: 100%; height: 500px;">
<iframe id="iframe" src="test.html"></iframe>
</div>
<script>
var parent = document.getElementById("parent");
var iframe = document.getElementById("iframe");
iframe.style.width = parent.clientWidth + "px";
iframe.style.height = parent.clientHeight + "px";
</script>
```
需要注意的是,使用JavaScript设置iframe的宽高时,需要在父页面和iframe的src页面都加载完成之后才能设置,否则可能会出现尺寸计算错误的问题。可以在页面加载完成后使用window.onload事件或者jQuery的$(document).ready()函数来执行设置代码。
阅读全文