Make an iframe as tall as its content

Resize an iframe to fit what it shows, and why it only works directly on pages from your own site.

12 February 2012 · 1 min read

From the archive: first published on mohamedsharaf.net in February 2012. Rewritten and checked in 2026; some details may be out of date.

An iframe has a fixed height, so its content either gets cut off or leaves empty space. If the framed page is on your own domain, the parent page can read its height and resize the frame after it loads:

<iframe id="frame" src="/embed/report.html" style="width:100%;border:0"></iframe>
<script>
  const frame = document.getElementById('frame');
  frame.addEventListener('load', () => {
    frame.style.height = frame.contentDocument.documentElement.scrollHeight + 'px';
  });
</script>

Browsers block this for pages from other domains, on purpose: one site must not read another site’s content. In that case the framed page has to cooperate and send its height with window.parent.postMessage(...), and your page listens for the message (and checks where it came from) before resizing.