Making an iframe take vertical space

Question

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?

Answer 1

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;
</script>

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

edit: Oops, forgot to declare the_height.

Answer 2

The workaround is not to use <iframe> and preprocess code on server-side.

Answer 3

Also check out this thread: How does the DiggBar dynamically resize its iframe's height based on content not on their domain?.

It addresses the same question.

Answer 4

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.

Answer 5

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

document.getElementById('the_iframe').contentWindow.document.body.scrollHeight

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">
    $(document).ready(function(){
        $('iframe').each(function(){
            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
                }
            });
        });
    });
</script>