仅在 Chrome 上出现 iframe 高度问题

Posted 2023-03-06

【中文标题】仅在 Chrome 上出现 iframe 高度问题

【英文标题】：Issue with the iframe Height just on Chrome

【发布时间】：2011-10-11 07:13:55

【问题描述】：

我在 Chrome 上遇到了 iframe 高度问题。所有其他常见的浏览器，如 IE、Opera、Safari 和 FF 都可以正常工作。

<iframe runat="server" id="ifTest" name="ifTest" frameborder="0" style="position:inherit;"></iframe>

在所有浏览器中都可以正常工作，但在 Chrome 中，页面底部的页脚之后会出现一个很大的空白区域。如果我将高度放在 iframe 中，iframe 会很小，但在页脚之后的页面底部没有大的空白。

谁能帮帮我？

【问题讨论】：

我认为height 和width 属性表示为像素而不需要“px”（width="960" 而不是width="960px"）。 “px”可能会在 Chrome 中引起一些古怪。此外，正如@Warface 所述，尝试使用 CSS 设置高度和宽度（内联 style="position:inherit; width: 960px; height: 790px"）。

我已尝试使用您的代码并将 Google 添加为加载页面，它在 Chrome 上对我来说运行良好。

【参考方案1】：

试试

iframe#ifTest
   width:960px;
   height:790px;

并从 iframe 标记中删除宽度和高度

【参考方案2】：

但是 iframe 调用了一个外部页面。我的解决方案中没有此页面。我尝试了一些像

这样的 javascript

function resizeFrame(f) f.style.height = f.contentWindow.document.body.scrollHeight + "px";

【参考方案3】：

这对我有帮助（在 Chrome 和 Moz.Firefox 中工作）：

iframe 
    height:100vh; // without it doesn't works
    width: 100%;
    overflow:hidden;


<iframe frameborder="0" name="iframe_article"></iframe>