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.
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.
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
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