自动调整静态页眉和页脚内的 iframe 高度答案

【问题标题】：Auto adjust iframe height inside a static header and footer自动调整静态页眉和页脚内的 iframe 高度
【发布时间】：2011-05-10 03:06:40
【问题描述】：

我有一个带有静态页眉和页脚的页面，它显示在整个页面中。然后我有一个显示在页眉和页脚之间的 iframe。目前，iframe 具有静态高度。我想根据内页的高度调整高度，因为 iframe 包含一个必须显示在外页中的应用程序。

因此，外部页面包含页眉和页脚，并且在它们之间显示应用程序（在 iframe 内）。这个应用程序中有很多页面，因此我需要让 iframe 自动调整高度。

除了 iframe，我还需要调整放置 iframe 的 div 的高度。因此，我必须在页面更改时调整 iframe 本身和容器 div 的高度。

我怎样才能做到这一点？

提前致谢

【问题讨论】：

标签： javascript iframe height

【解决方案1】：

function resizeContainer() {
    var coordCont = getCoordinates($('#myContainer'));
    var h = $(window).height() - coordCont.top - 18;
    var minH = 800;
    $('#myContainer').css({ height: h < minH ? minH : h, overflow: 'auto' });
};

获取坐标是我的一个自定义函数，用于获取元素的左/上/宽/高/zIndex。我也使用 minH，因为我不希望内容少于 800。你可以申请 iFrame

【讨论】：

我的 iframe 没有再次加载（即页面没有刷新），链接在 iframe 本身中，有没有办法我可以通过这种方式调整 iframe 的高度？
是的，iframe 是一个 HTML 标记，并且像任何其他标记一样，它可以使用 css 调整大小，如果您希望它是动态的，您只需将上述方法附加到 $(window).resize(函数 (ev) { resizeContainer(); });