<blockquote>
  <p><strong>Possible Duplicate:</strong><br>
  <a href="https://stackoverflow.com/questions/153152/resizing-an-iframe-based-on-content">Resizing an iframe based on content</a>  </p>
</blockquote>



<p>I'm loading an iFrame and want the parent to automatically change the height based upon the height of the iFrame's content.</p>

<p>To simply things, all pages belong to the same domain, so I shouldn't run into cross-site scripting issues.</p>

On any other element, I would use the
```
scrollHeight
```
of the DOM object and set the height accordingly. I don't know if this would work on an iframe (because they're a bit kooky about everything) but it's certainly worth a try.
Edit: Having had a look around, the popular consensus is setting the height from within the iframe using the
```
offsetHeight
```
:
```
```
function setHeight() {
    parent.document.getElementById('the-iframe-id').style.height = document['body'].offsetHeight + 'px';
}
```
```
And attach that to run with the iframe-body's
```
onLoad
```
event.