我正在通过 JQM 创建网站/html5 应用程序。
每个页面都有固定的页眉和页脚，中心内容可滚动。在一个页面上，我有一个基于 URL 动态填充的 iframe - 对于外部站点 - 通过本地存储传递。
目前 iframe 似乎有一些任意高度，远小于固定页眉和页脚之间的固定差异。
我需要 iframe 来填补页眉和页脚之间的空白，以便中间部分（主要）仅填充 iframe。我需要这是一个完美的契合，这样当外部链接的页面大于页眉和页脚之间的高度时（例如在移动设备上查看时），我不会在滚动中滚动。
我的 HTML 看起来像这样：
<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>
正如您将看到的，我已尝试将“高度：100%”添加到相关部分，并且我已将最小高度（纯粹用于测试目的）添加到 iframe。不幸的是，我不能为此使用固定高度，因为移动设备的屏幕尺寸和分辨率有很多变化。
如何让 iframe 100% 填充页眉和页脚之间的空白？
仅将容器 div 和 iframe 的宽度和高度设置为“100%”是行不通的。 您需要专门计算高度和宽度并将其应用于您的 iframe。
document.getElementById("iframe").innerHTML = "<iframe src='" + localStorage.ExternalListing + "'
width='" + (window.innerWidth - 20) + "'
height='" + (window.innerHeight - document.getElementById("header").offsetHeight - document.getElementById("footing").offsetHeight - 20) + "'
style='padding:0px;margin:0px'></iframe>";
查看iframe的高度是如何计算的。
注意：20px 偏移量确保滚动条不会被触发。
仅在特定页面使用以下内容，否则会阻止正文/页面滚动。
下面的 CSS 使用 height inheritance 以及
box-sizing.ui-content请注意，具有固定工具栏的页面 div 添加
padding-toppadding-bottom对于浮动工具栏（非固定），解决方案是不同的。如果你有兴趣，我会发布它。
html, body,
.mainpage {
height:100%;
margin: 0;
padding: 0;
}
.mainpage,
.mainpage * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.mainpage .ui-content {
padding: 0; /* remove default padding */
height: inherit; /* full height of viewport - padding of page due to fixed toolbars */
}
.mainpage .ui-content #iframe,
.mainpage .ui-content #iframe iframe {
height: 100%;
width: 100%;
display: block;
}
我结合使用了 Omar 和 Vikram 的解决方案，因为它们都不能完全满足我的需要。
首先我使用了Vikram的JS来检测高度：
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');
});
}
然后我按照 Omar 的建议使用了以下内容来重新计算方向变化时的 iframe 尺寸。
$(document).on("pagecontainertransition", loadIFrame);
$(window).on("throttledresize orientationchange", loadIFrame);