JavaScript 如何控制 iframe 子页面自适应高度？

在 A 网站的页面中，用 iframe 嵌入一个来自 B 网站的子页面，怎么控制 iframe 子页面自适应高度？

比如，在 A 网站的 index.html 中，用 iframe 嵌入一个 B 网站的 child.html 子页面：

<iframe id="iframe_id" height=100% width=100% src="http://B.com/child.html" scrolling="no" frameborder=0></iframe>

（由于 child.html 是动态高度的）然后在上面这段代码下面，添加 JavaScript 来修改 iframe 高度：

<script type="text/javascript">
    var x = document.getElementById("iframe_id");
    x.height=document.documentElement.clientHeight;
</script>

修改 iframe 的高度之后，child.html 页面下半截还是被遮住（显示不完全）。把 clientHeight 改成 scrollHeight 也一样不能完全显示 child.html 的全部高度。