Currently, I am facing an issue with displaying a pdf in an iFrame within my app. The problem lies in the fact that the iFrame does not occupy the entire space between the header and footer divs on the page. I am utilizing Jquery Mobile 1.1.0 for the themes.
I have ruled out minor factors such as margins and padding, as the open space appears to be on a larger scale. Below is the relevant segment of my 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 -->
Furthermore, the CSS snippet dealing with the footer is as follows:
.footer{
position:fixed;
height:50px;
bottom:0px;
left:0px;
right:0px;
margin-bottom:0px;
}
Additionally, here are some important JQM links:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
To reiterate, my main concern revolves around the div containing the iFrame not occupying the full height of the page, resulting in unwanted empty space. Any assistance or guidance on how to address this issue would be greatly appreciated. Thank you in advance!