将 iFrame 设置为固定页脚和页眉之间的全高

Posted

技术标签:

【中文标题】将 iFrame 设置为固定页脚和页眉之间的全高【英文标题】:Set iFrame to full height between fixed footer and header 【发布时间】:2014-11-21 11:08:20 【问题描述】:

我正在通过 JQM 创建一个站点/html5 应用程序。

每个页面都有一个固定的页眉和页脚,中心内容是可滚动的。在一个页面上,我有一个 iframe,它基于通过本地存储传递的外部站点的 url 动态填充。

目前 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"   > 
            <div id="iframe"   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">&nbsp;</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% 填充页眉和页脚之间的空白吗?

【问题讨论】:

【参考方案1】:

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 偏移是为了确保滚动条不会被触发。

【讨论】:

这似乎阻止了带有此代码的页面加载。每当我单击应该将我传递到此页面的链接时,ajax 微调器就会继续旋转。 奇怪!开发者控制台说什么?错误也发生在我的演示链接或您的页面上? 小提琴加载后,再次尝试运行。 刚刚发现。这是因为它正在寻找一个“标题”的 elementId 并且没有。我已经将它添加到我的标题中,现在它可以工作了。它在桌面上的 Firefox 上完成这项工作。我会在手机上的 phonegap 包装器中快速运行五次,看看情况如何。 哦,是的!我的错!忘了提到我添加了该 id 以通过 javascript 访问该元素。【参考方案2】:

仅在特定页面中使用以下内容,否则会阻止正文/页面滚动。

下面的 CSS 使用高度 继承 以及 box-sizing 根据视口的高度设置 .ui-content 的高度。它可以响应任何屏幕分辨率。

请注意,带有固定工具栏的页面 div 会添加 padding-toppadding-bottom 以容纳工具栏。内容 div 继承页面高度减去填充 (88px)。

对于浮动工具栏(非固定),解决方案是不同的。如果你有兴趣,我会发布它。

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;

Demo

【讨论】:

@PhillHealey 问候队友! iframe 应该看起来像没有顶栏的小窗口(结果)jsfiddle.net/Palestinian/fs-s-r019x 在那个小提琴中,我使用了相同的高度继承概念来填充屏幕。尝试调整盒子的大小,看看它的响应速度如何。 @PhillHealey 我已将height 更新为100% 以及演示。 我不知道为什么,但这对我不起作用@Omar @PhillHealey 你确定你没有错过 CSS 中的任何选择器吗? "我认为是因为我通过 JS 将 iframe 插入到 div 中,而不是将 iframe 物理地放在页面上。【参考方案3】:

我结合使用了 Omar 和 Vikram 的解决方案,因为它们都不能完全满足我的需求。

首先我使用 Vikrams 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);

【讨论】:

请花一些时间重新考虑您的工作流程,$(document).on("pagecontainershow 不会在 throttledresize orientationchange 上触发,因为该页面已经显示... 这就是当方向改变发生时 iframe 被调整大小的原因。此外,挖掘近 5 年的旧线程被认为是不好的做法。

以上是关于将 iFrame 设置为固定页脚和页眉之间的全高的主要内容,如果未能解决你的问题,请参考以下文章

灵活的 css 布局,包含容器内的页眉、页脚和滚动体

在单个单元格中显示页眉页脚和单元格?

reportlab 中的多行(段落)页脚和页眉

边框页脚和页眉长度调整为 s-s-rS

latex book类:每章页眉页脚和标题格式 以及 去除章与章之间空白页的问题

滚动 tableView 部分的页脚和页眉