JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Start of pdfReader page: #pdfReader -->
<div data-role="page" id="pdfReader" data-theme="b">

    <div data-role="header">
        <h3 id="keyHeader2">Key Description</h3>
    </div> <!-- /header -->

    <div data-role="content">
        <iframe id="pdfFrame" width="100%" height="auto" src=""></iframe>
    </div>

    <div data-role="footer" class="footer">

        <p class="margin">
            <a href="#keyPopup" data-rel="back" data-role="button" data-inline="true" data-icon="back">Back</a>
        </p>

    </div>
</div> <!-- /#pdfReader -->

CSS

.footer{
position:fixed;
height:50px;
bottom:0px;
left:0px;
right:0px;
margin-bottom:0px;
}

div.ui-content {
    padding: 0;
}

iframe#pdfFrame {
    min-height: calc(100% - 100px);
}