Making an iframe take vertical space


I would like to have an iframe take as much vertical space as it needs to display its content and not display a scrollbar. Is it at all possible ?

Are there any workarounds?

By : Beriadan


Adding a DOCTYPE declaration to the IFRAME source document will help to calculate the correct value from the line


see W3C DOCTYPE for examples

I was having problems with both IE and FF as it was rendering the iframe document in 'quirks' mode, until I added the DOCTYPE.

FF/IE/Chrome support: The .scrollHeight doesnt work with Chrome so I have come up with a javascript example using jQuery to set all IFRAME heights on a page based on the iframes content. NOTE: This is for reference pages within the your current domain.

<script type="text/javascript">
            var context = $(this);
            context.load(function(event){ // attach the onload event to the iframe  
                var body = $(this.contentWindow.document).find('body');
                if (body.length > 0 && $(body).find('*').length > 0) { // check if iframe has contents
                    context.height($(body.get(0)).height() + 20);
                } else {
                    context.hide(); // hide iframes with no contents
By : Adam

This should set the IFRAME height to its content's height:

<script type="text/javascript">
the_height = document.getElementById('the_iframe').contentWindow.document.body.scrollHeight;
document.getElementById('the_iframe').height = the_height;

You may want to add scrolling="no" to your IFRAME to turn off the scrollbars.

edit: Oops, forgot to declare the_height.

By : ceejayoz

This CSS snippet should remove the vertical scrollbar:

body {
  overflow-x: hidden;
  overflow-y: hidden;

I'm not sure yet about having it take up as much vertical space as it needs, but I'll see if I can't figure it out.

This video can help you solving your question :)
By: admin