Web技術 iframeタグの高さ調整【JavaScript/CSS】

###前提・実現したいこと

iframeの高さの自動調整がきちんと動作するPC/スマホ対応のレスポンシブサイトを作成したいと思っています。

###発生している問題・エラーメッセージ
iframeの高さの自動調整をしたいのですが、上図のような操作をすると、自動調整が効かなくなる。
結果、iframe内下部に余分なエリアが作られる。

###該当のソースコード

html
1<!-- index.html -->
2<meta name="viewport" content="width=device-width, initial-scale=1">
3<script>
4    window.onload = window.onresize = function () {
5        var myF = document.getElementsByTagName('iframe')[0]
6        var myC = myF.contentWindow.document.documentElement;
7        var myH = (document.all) ? myC.scrollHeight : myC.offsetHeight;
8        myF.style.height = myH + "px";
9    }
10</script>
11<iframe src="p.html" style="width:100%;background:#ff7777"></iframe>
12
13
14<!-- p.html -->
15<p style="font-size: xx-large">aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa </p>

###試した結果得られたもの
Fire foxでは問題なく動作する。
Chrome,Safari,IE(11),Edge,Operaでは上図のような動作になる。

上図4.の動作時にiframe内documentのbodyの高さの変更が見られなかったことが原因だと思われる。
動作検証のためiframeの高さを固定にし、上図4.の動作時を行ったところ、iframe内documentのbodyの高さに変更が見られた。(固定値<iframe内documentのbody)
要するに(恐らくだが)、Firefoxではiframe内documentの内容からbodyの計算を行うが、Chrome等はiframeの高さからbodyの計算を行っている。(高さが足りないときのみ、iframe内documentの内容からbodyの計算を行っている)

###補足情報(言語/FW/ツール等のバージョンなど)
動作サンプル