Been looking through Google for a while now but I can’t find the right answer.
Does anyone know a way to change the height of an iFrame dynamically based on the height of the page it’s displaying?
I’ve added the code for the HTML page I’ve been working on called testiframe.html
The iFrame is opening on Googles main page but it’s not resizing the iFrame to the full size of the Google page. I don’t want the iFrame to fill my page (in red) I want it to display the full height of the google page within the iFrame.
Any helps appreciated 
<html>
<head>Test Page</head>
<body>
<style type=“text/css”>
body
{
background-color:#FF0000;
}
</style>
<iframe onload=“resizeMe()” id=“frame” src=“http://www.google.com/” width=“100%” frameborder=“0” marginheight=“0” marginwidth=“0” overflow=“no”></iframe>
<script type=“text/javascript”>
function resizeMe(){
var x=document.getElementById(“frame”);
docHeight = x.document.body.scrollHeight;
alert(docHeight);
x.style.height = docHeight + ‘px’
}
</script>