Here's an updated version of your demo
仅仅将容器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来根据viewport的高度设置.ui-content的高度。它可以响应任何屏幕分辨率。
注意带有固定工具栏的页面div添加了padding-top和padding-bottom来容纳工具栏。内容div继承页面高度减去填充（88 px）。
对于浮动工具栏（非固定）的解决方案是不同的。如果你感兴趣，我会张贴它。

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