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... /

To see the iframe in action with the auto-sizing, view this page... /

It works in browsers such as Chrome but not Firefox

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/gjrowe/X63KR/

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

It works in browsers such as Chrome but not Firefox

• javascript
• iframe

• I know its an old thread but also take a look at stackoverflow./questions/153152/… that may be another way to deal with it. – Kendrick Commented Apr 26, 2014 at 2:25

2 Answers 2

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/y2WCP/9/

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