In this article I will show you how to set auto iFrame height.

What is Auto iFrame Height?

This solution will automatically adjust the height of the iframe to the height of the content inside it.

An iFrame usually loads content into it from an external source using a URL with it’s src attribute.

If you set a height on the iframe with the height attribute or CSS height property, the iFrame will use that height. If the content inside the iFrame is higher or longer than the height set, a vertical scrollbar will appear which requires you users 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.

How to Install and Use Auto iFrame Height

Follow these simple steps to install and use the script:

1. Download the Auto iFrame Height Script

First thing is to download the Auto iFrame Height script to your computer.

2. Load the Script on Website

Upload the autoheight.js file to your website somewhere and include the script on your website using a script tag:

Just change the src attribute to the correct URL to where you uploaded the autoheight.js file.

3. Add Class Name to iFrame

You need to add the class autoHeight to the iFrame/s that you want to set an automatic height to like this:

Notice the class="autoHeight" part added to the iFrame in the code above.

That’s it, you are done and your iFrame will now automatically adjust it’s height to the height of the content.

jQuery Auto iFrame Height Demonstration