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

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 3

@Daniel

I don't mind the body scrollbar, I would actually rather have that one than have the iframe generate a second set of toolbars that take only part of the page.

@Teifion

This would not work, you can set a height in pixel for the iframe though, but I find that a rather ugly solution (setting the iframe height to some random large value)

Answer 4

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>

Answer 5

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

Answer 6

Also check out this thread: http://stackoverflow.com/questions/754519/how-does-the-diggbar-dynamically-resize-its-iframes-height-based-on-content-not.

It addresses the same question.