div下的iframe随着内容的多少而控制div的高度

最新推荐文章于 2025-05-18 13:16:54 发布

SlowlyGrowUp

最新推荐文章于 2025-05-18 13:16:54 发布

阅读量875

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签：记录自己的点滴

本文链接：https://blog.youkuaiyun.com/weixin_43494713/article/details/87260912

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使iframe元素自适应其内容高度的方法，通过使用JavaScript获取iframe内部文档的高度，并将其设置为iframe的样式，从而实现iframe随内容变化而自动调整高度的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//HTML结构
<div id=demodiv  style="width: 100%;">
	<iframe id="searchiframe" width=100%  src="index.jsp"/>"
</div>
//在iframe引入的index.jsp页面编写，外层DIV和iframe不需要指定高度
$(function(){  
	 var pa_frame=parent.document.getElementById('searchiframe');
	 var height = pa_frame.contentWindow.document.body.scrollHeight+'px';
	 pa_frame.style.height=height;
});