要实现一个iframe自动适应页面高度的示例，我们可以通过JavaScript来实现。以下是一个简单的HTML和JavaScript的示例代码，这个iframe将根据其内部内容的高度自动调整其高度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Iframe Auto Height</title>
<style>
/* 确保iframe在其容器中占据100%的宽度 */
iframe {
width: 100%;
border: none; /* 移除边框，以便更好地展示 */
}
</style>
</head>
<body>
<iframe id="myIframe" src="about:blank" frameborder="0"></iframe>
<script>
// 设置iframe的初始高度（可选，根据实际情况调整）
var iframe = document.getElementById('myIframe');
iframe.style.height = '500px'; // 初始高度
// 当iframe加载完成后，调整其高度
iframe.onload = function() {
this.style.height = this.contentWindow.document.body.scrollHeight + 'px';
};
// 如果iframe的源内容变化（例如，通过JavaScript动态修改），可能需要重新调整高度
// 这里只是一个基本示例，实际应用中可能需要更复杂的逻辑来处理动态内容
</script>
</body>
</html>
注意：
- 这个示例代码在iframe加载完成后，会尝试读取其`contentWindow.document.body.scrollHeight`来设置iframe的高度。但是，跨域安全策略（Same-Origin Policy）可能会阻止你读取跨域iframe的内容高度。如果你的iframe加载的是来自不同源的页面，这种方法将不会工作。
- 对于跨域iframe，你可能需要使用其他技术，如`postMessage` API来进行跨域通信，并在iframe内部和外部之间安全地传递高度信息。
- `about:blank`是示例中使用的iframe的初始源，你应该将其替换为你想要加载的实际URL。