iframe的高度自适应实际上是通过将其高度设置为内嵌网页的高度，来消除滚动条和嵌套的痕迹，从而提升用户体验和网站的视觉效果。

对于固定内容，可以直接使用CSS设定一个高度来满足需求。但如果内容是动态的或未知的，情况就会稍有不同。

iframe内容未知但高度可预测

在这种情况下，可以给iframe设置一个默认的CSS最小高度，并结合JavaScript来调整高度。以下是常用的兼容性代码：

演示地址

演示一

只需修改iframe的ID即可，通常建议使用上述代码以避免污染HTML代码。

演示二

处理多个iframe的情况

演示三

针对已知iframe ID的调用

演示四

内容宽度变化的iframe自适应高度

演示五

通过调试工具可以查看运行效果。

跨域情况下的iframe自适应高度

在跨域的情况下，由于JavaScript的同源策略，父页面的JavaScript无法获取iframe内页面的高度。因此，需要一个代理页面来帮助获取高度。

假设www.a.com下的a.html页面包含www.b.com的c.html页面，可以使用www.a.com下的agent.html作为代理，通过它获取iframe页面的高度并设置iframe的高度。

a.html中包含iframe:

在c.html中加入以下代码：

最后，在agent.html中放入以下JavaScript：

演示六

来源于前端开发博客