javascripthtmliframeheightscrollbar

Make iframe automatically adjust height according to the contents without using scrollbar?

For example:

<iframe name="Stack" src="http://stackoverflow.com/" width="740"
        frameborder="0" scrolling="no" id="iframe"> ...
</iframe>

I want it to be able to adjust its height according to the contents inside it, without using scroll.

Solution

  • Add this to your <head> section:

    <script>
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
  }
</script>

    And change your iframe to this:

    <iframe src="..." 
        style="border-style: none; height: 0; overflow: hidden"
        onload="resizeIframe(this)" />

    As found on sitepoint discussion.