Adjust an iframe element’s height to fit its content

Anything related to iframes falls into the category of “things you wish you’re never going to have to know”, but odds are at some point you might. Given that iframes are now being used by many modern sharing technique there’s a much higher chance that you’re going to run into them – just when it looked like they were going away.

All of this preamble is basically an excuse as to why I’m much more prone to pasting the occasional iframe related link these days.. and speaking of those, here’s one I prepared earlier!

Link: How to adjust an iframe element’s height to fit its content

In an ideal world there would always be a clean way of displaying data supplied by a third party on your site. Two examples would be getting the data in JSON or XML format from a Web Service and having an API to code against. But you don’t always have any of those options.


Sometimes the only way of incorporating data from a third party is by loading it in aniframe element. A few examples are financial reports, e-commerce applications, and ticket booking applications. Using an iframe is not ideal for many reasons, one of which is that it can make multiple sets of scrollbars appear on the page. Not only does it look ugly, it also makes the site less user-friendly. But there is a workaround.

The author of this article feels the same need for disclaiming as I do, as you can see via the title of the last section “Avoid the iframe mess if possible” – good advice.

(I feel bad tagging this post as Web Development – maybe I should have used “Bad Web Development” instead?")


Posted on Thursday, March 29, 2012 2:53 PM |

Like this? Share it!

  • # re: Adjust an iframe element’s height to fit its content
    Commented on 3/30/2012 12:30 AM

    “things you wish you’re never going to have to know” - I like that. I think I'll create a new bookmark folder for that. BTW nice article about using iframes.

Post a comment
Please add 2 and 1 and type the answer here:
Remember me?
Ensure the word in this box says 'orange':