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?

score 11 · Accepted Answer · edited Feb 08 '16 at 14:28

11

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.

edited Feb 08 '16 at 14:28

Alexander Elgin

6,796
4
40
50

answered Aug 29 '08 at 16:43

ceejayoz

176,543
40
303
368

4

Very handy, cheers. Might be worth mentioning that this won't work so well if the iframe is on a different domain due to the same origin policy – ConroyP Oct 16 '08 at 09:32

score 0 · Answer 2 · edited May 23 '17 at 12:07

0

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.

edited May 23 '17 at 12:07

Community

1
1

answered Jul 21 '09 at 00:42

score 0 · Answer 3 · edited Feb 08 '16 at 14:29

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>

score 0 · Answer 4 · answered Nov 13 '08 at 21:47

0

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

answered Nov 13 '08 at 21:47

Kornel

97,764
37
219
309

2

This isn't always possible, unless you're going to build a custom proxy server that rewrites links in the html body... which is a joke. – ErikE Nov 16 '10 at 17:37

score 0 · Answer 5 · edited Jan 14 '16 at 19:12

0

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.

edited Jan 14 '16 at 19:12

thanksd

54,176
22
157
150

answered Aug 29 '08 at 16:36

Daniel Jennings

6,304
3
32
42

Making an iframe take vertical space

5 Answers5

Linked