How to set the iframe height according to the content?

Question

I need to set the height of the iframe according to the content.

<iframe src="../graphs/Average.html" alt="##graphname" width=100% height=680px overflow:visible frameborder=0 class="general" style="border-collapse: collapse;" noresize onload="document.getElementById('p').style.display='none';"></iframe>

I have also tried: <style> div{overflow:visible} </style> But its also not working.

Answer 1

For this you can use following JScode:

<iframe id="iframe" src="../graphs/Average.html" alt="#graphname" width="100%" height="680"  frameborder=0 class="general" style="border-collapse: collapse;" noresize onload="document.getElementById('p').style.display='none';"></iframe>    

Using javascript

document.getElementById("iframe").style.height = $('#iframe').get(0).contentWindow.document.body.offsetHeight + 'px'

Using jQuery

$('#iframe').height($('#iframe').get(0).contentWindow.document.body.offsetHeight + 'px');