Dynamically define iframe height based on window size (NOT CONTENT)

Question

I have found threads such as How to dynamically resize iFrame in Firefox? which talk about sizing an iframe based on the remote content; however, I have not found a way (in Firefox) to set the height of the iframe based on the window size.

Other browsers are able to use .body.scrollHeight but it appears that Firefox can't use that. See... http://jsfiddle.net/gjrowe/X63KR/

To see the iframe in action with the auto-sizing, view this page... http://jsfiddle.net/gjrowe/y2WCP/

It works in browsers such as Chrome but not Firefox

I know its an old thread but also take a look at http://stackoverflow.com/questions/153152/resizing-an-iframe-based-on-content that may be another way to deal with it. — Kendrick, Apr 26 '14 at 02:25

score 3 · Answer 1 · answered Apr 10 '13 at 20:02

3

Here is what I did to have a cross-browser fix...

I added this javascript function...

function getDocHeight() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
}

I then changed...

var content_height=document.body.scrollHeight-100;

to...

var content_height=getDocHeight()-100;

You can see it in action at http://jsfiddle.net/y2WCP/9/

answered Apr 10 '13 at 20:02

G-J

1,000
2
14
29

The answer was obtained from: http://james.padolsey.com/javascript/get-document-height-cross-browser/ – G-J Apr 10 '13 at 20:10
So this works fine. However, if I dynamically remove an element, this method continues to report the old height. Ideas? – U Avalos Oct 12 '17 at 03:45

score 2 · Answer 2 · answered Apr 10 '13 at 19:15

i don't know if you want to use jQuery, but with jQuery i think i fixed your problem..

// Header is 50px and footer is 50px; therefore, 100px is of screen height is used
// Define content_height and consider the 100px which has already been used
var content_height=document.body.scrollHeight-100;
//alert(content_height);
content_height = $(window).height() -110;
//alert(content_height);
// Set iframe height
document.getElementById('pdf_frame').style.height=content_height+"px";

// Reset iframe height after window resize
$(function(){
    $(window).resize(function(){
        content_height = $(window).height()-110;
        //var content_height=document.body.scrollHeight-100;

        document.getElementById('pdf_frame').style.height=content_height+"px";
    });
});

jsFiddle link

Dynamically define iframe height based on window size (NOT CONTENT)

2 Answers2

Linked