How to set iframe height:auto in HTML5

Question

I'm trying to make iframe height auto(100%), so searched lot of examples.

But the problem is... it does not working good in IE, only works in Chrome.

<div class="stockIframe ">
<iframe src="http://google.com" onload="autoResize(this)" height="100%" width="100%"></iframe> 
</div>

html,body { height: 100% }
.stockIframe {  width:100%; height:100%; }
.stockIframe iframe {  width:100%; height:100%; border:0;overflow:hidden }


<script>
function autoResize(i)
{
    var iframeHeight=
    (i).contentWindow.document.body.scrollHeight;
    (i).height=iframeHeight+20;
}


</script>

Anyone know how to fix it ?

Solution

I see no problem in your code, but don't forget the style tag

I tested it on IE 11 and it works.

<div class="stockIframe ">
    <iframe src="http://google.com" onload="autoResize(this)" height="100%" width="100"></iframe> 
</div>

<style>
   html,body { height: 100% }
   .stockIframe {  width:100%; height:100%; }
   .stockIframe iframe {  width:100%; height:100%; border:0;overflow:hidden }
</style>

<script>
   function autoResize(i) {
     var iframeHeight=
     (i).contentWindow.document.body.scrollHeight;
     (i).height=iframeHeight+20;
   } 
</script>