jQuery : Auto iFrame Height

This article will show you how to automatically adjust the height of an iFrame to the height of the content inside of the iFrame with the use of the jQuery JavaScript library and the jQuery autoHeight plugin.

When you have an iFrame on a page and the height of the content in the iFrame is larger than the default or specified height of the iFrame, a vertical scrollbar will be shown which allows you to scroll the content inside the iFrame.

You can remove the scrollbar by adding the attribute scrolling="no" to the iFrame element but the overflowing content will simply be hidden. Alternatively, you can define an overflow:hidden; CSS style attribute to the iFrame but it will also just hide the overflowing content in the iFrame and won’t adjust the height of the iFrame to cater for the content inside it.

The solution is to automatically adjust the height of the iFrame – after it has loaded – according to the height of the content inside of it. This can be done with the jQuery autoHeight plugin.

Reference jQuery

Before you can automatically adjust the height of iFrames on your page(s) with the use of the jQuery autoHeight plugin, you’ll need to reference the actual jQuery library on your site. You can do so by downloading jQuery and referencing the script on your page(s). Put jQuery on your server and use the following code to reference the script.

<script type="text/javascript" src="jquery.js"></script>

The code above will load jQuery if the “jquery.js” file is in the same directory as the current file. If you put jQuery into a subfolder like “js” for example, the SRC attribute in the code above should be changed to “js/jquery.js”.

Reference the autoHeight plugin

With the jQuery SCRIPT tag in your page, you’ll need to reference the jQuery autoHeight plugin as well. Same way as you did with jQuery, you’ll need to download the jQuery autoHeight plugin and put its JavaScript file on your server and reference it with a SCRIPT tag like below.

<script type="text/javascript" src="jquery.autoheight.js"></script>

Add Class Name

All that is left to do is to add a class name “autoHeight” to the iFrame(s) which need to be automatically adjusted in height in order to fit all of the content into the iFrame without any scrollbars. Below is an example.

<iframe class="autoHeight" id="myframe" name="myframe" src="http://example.com/iframe.php" height="240" width="320" frameborder="0" scrolling="auto"></iframe>

jQuery Auto iFrame Height Demonstration

UPDATE : Please note that this jQuery autoHeight plugin will not work with iFrames accessing content from a different domain or remote location since the window object originating from a different domain cannot be accessed from the current one due to JavaScript security restrictions.


  1. Abdul Rehman on December 24, 2011

    I am using ur code it is working fine but i have a new frame which change content using ajax technique.

    onload iframe loads data nicely but when content is changed using ajax iframe do not readjust its height

    (My parent page and iframe are on same domain)

    Please help me.

  2. prakash on January 10, 2012

    i has used iframe auto plugin properly. if i set scrolling = no, so that when content in iframe is increased. The iframe is extend with out scrollbars but is hidden in parent page. I want parent page to be extended.
    when iframe extend. so that we wont see ugly scroll bars.

  3. Elton Morais on January 19, 2012

    Hi, Abdul Rehman

    On my previous post I had a idea for solve the problem with external content and could it work with ajax.

    In a external content, will work only if there’s only the iframe on the page. But the second part (to adjust the height) could work on another situation, like yours.

  4. […] jQuery : Auto iFrame Height | Lost-In-Code 「jQuery.js」と「jquery.autoheight.js」をダウンロードします。 もちろん、ウェブサーバにアップロードしてパスを指定します。 […]

  5. prakash a on May 3, 2012


    Could you please tell me how i can used this code for cross domain?

  6. […] 登录 iframe高度自适应demo及下载 2012-05-04 JavaScript LAMP100 1 人阅读 没有评论 1. 下载代码jquery-auto-iframe-height或者 下载 […]

  7. Hyoubu kyousuke on December 11, 2013

    Cool! perfect n_n …

  8. DavidSalazarGarcia on May 14, 2014

    Excellent!! save my work on my portfolio. 😀 In the add class name, the example need the … class=”autoHeight” code

    • Antonie Potgieter on May 14, 2014

      Thank you for the comment. I’m not sure why it wasn’t in there but I’ve added it now. It should’ve been in there. Enjoy!

  9. ozkan ozer on June 26, 2016

    not change iframe reload


Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!

%d bloggers like this: