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
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
autoheight.js file to your website somewhere and include the script on your website using a
Just change the
src attribute to the correct URL to where you uploaded the
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:
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.