I'm creating a site / html5 app via JQM.
Each page has a fixed header and footer with the central content being scrollable. On one page I have an iframe that is dynamically populated based on a URL -for an external site- passed via local storage.
At present the iframe seems to have some arbitrary height that is much less than the fixed difference between the fixed header and footer.
I need the iframe to fill the gap between header and footer so that the middle section (main) is populated with just the iframe. I need this to be a perfect fit so that I don't get scrolling within scrolling when the externally linked page is larger that the height between the header and footer (eg when viewed on a mobile device).
My HTML looks like this:
<body>
<div data-role="page" id="step3" class="mainpage" data-theme="a">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<a href="#left-panel" data-role="button" data-icon="bars" data-prefetch data-dom-cache="true" data-tap-toggle="false">Menu</a>
<h1>Title</h1>
<a data-icon="back" data-rel="back" title="Go back">Back</a>
</div><!-- /header -->
<div role="main" class="ui-content step3" width="100%" height="100%" >
<div id="iframe" width="100%" height="100%" style="padding:0px;margin:0px;height:100%"></div>
</div><!-- /content -->
<div id="footing" data-role="footer" data-position="fixed" data-tap-toggle="false">
<div id="ad"> </div>
</div>
<script>
document.getElementById("iframe").innerHTML="<iframe src='" + localStorage.ExternalListing + "' width=\"100%\" height=\"100%\" style=\"padding:0px\;margin:0px\;min-height:500px\;height:100%\;\"></iframe>";
</script>
<style>
.ui-content.step3 {
padding: 0;
height:100%;
}</style>
</div><!-- /page -->
</body>
As you will see I've tried adding 'height:100%' to the relevant sections, and I've added a min-height (purely for testing purposes) to the iframe. Unfortunately I can't used a fixed height for this since there are so many variations of screen size and resolution for mobile devices.
How can I get the iframe to fill 100% the gap between header and footer?
I've used a combination of Omar's & Vikram's solutions since neither work entirely to my needs.
First I've used Vikram's JS to detect the height:
function loadIFrame(){
$(document).on("pagecontainershow", function () {
var page3 = $.mobile.pageContainer.pagecontainer("getActivePage");
if(page3[0].id == "step3")
{
$.mobile.loading('show');//show ajax loder image
}
});
//set iFrame height and width to available window
document.getElementById("iframe").innerHTML = "<iframe src='" + localStorage.ExternalListing + "' width='" + (window.innerWidth) + "' height='" + (window.innerHeight - document.getElementById("header").offsetHeight - document.getElementById("footing").offsetHeight) + "' style='padding:0px;margin:0px;border:0px;'></iframe>";
//hide ajax loder image
//setTimeout(function() { $.mobile.loading('hide'); }, 300);
$('iframe').load(function() {
$.mobile.loading('hide');
});
}
And then I've used the following, as suggested by Omar, to recalculate the iframe dimensions on change of orientation.
$(document).on("pagecontainertransition", loadIFrame);
$(window).on("throttledresize orientationchange", loadIFrame);