要实现iframe高度随内容改变的效果，可以使用以下步骤：
获取iframe元素的内容高度。
将获取的内容高度赋值给iframe元素的高度属性。
为iframe元素添加一个事件监听器，当iframe元素的内容发生变化时触发。
在事件监听器中，再次获取内容高度，并将其赋值给iframe元素的高度属性。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
#myIframe {
width: 100%;
border: none;
overflow: hidden;
}
</style>
</head>
<body>
<iframe id="myIframe" src="content.html"></iframe>
<script>
var iframe = document.getElementById('myIframe');
// 获取内容高度并设置初始高度
var initialHeight = iframe.contentWindow.document.body.scrollHeight;
iframe.style.height = initialHeight + 'px';
// 添加事件监听器
iframe.contentWindow.addEventListener('resize', function() {
// 获取内容高度并设置iframe高度
var newHeight = iframe.contentWindow.document.body.scrollHeight;
iframe.style.height = newHeight + 'px';
});
</script>
</body>
</html>
需要注意的是，上述示例代码中的content.html是一个单独的HTML文件，作为iframe的内容。你需要将其替换为你自己的内容文件。