JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header" style="height:50px;background-color:#000000;color:yellow;text-align:center;">PAGE HEADER</div>
    <iframe id="pdf_frame" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" style="width:100%">Please upgrade to a modern browser that supports "iframes"</iframe>
<div id="footer" style="height:50px;background-color:#000000;color:yellow;text-align:center;">This footer should be at the bottom of the browser but it isn't in Firefox - Why?</div>

JavaScript

// 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;
var content_height=getDocHeight()-100;

// Set iframe height
document.getElementById('pdf_frame').style.height=content_height+"px";

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

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

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)
    );
}