在Chrome浏览器中，iframe高度存在问题

Question

我在Chrome浏览器中遇到了iframe高度的问题。其他常见的浏览器，如IE、Opera、Safari和FF都没有问题。

以下是需要翻译的内容： <iframe runat="server" id="ifTest" name="ifTest" frameborder="0" height="790px" width="960px" style="position:inherit;"></iframe> 在所有浏览器中，这都很好用，但在Chrome中，在页脚之后会出现一个大的白色空间。如果我将iframe的高度降低，那么iframe就会很小，但在页脚之后就不会有大的白色空间。

有人可以帮助我吗？

- Lucas Germano

---

我认为height和width属性可以用像素表示，而不需要加上"px"（例如使用width="960"代替width="960px"）。在Chrome浏览器中，"px"可能会导致一些奇怪的问题。另外，正如@Warface所提到的，尝试使用CSS设置高度和宽度（内联样式style="position:inherit; width: 960px; height: 790px"）。 - Chad Levy

我已经尝试了您的代码，并将谷歌添加为加载页面，在我的Chrome浏览器上运行良好。 - Warface

Answer 1

尝试一下

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

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

- Warface

Answer 2

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

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

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

- Kas Elvirov

Answer 3

但是iframe调用了一个外部页面。我在我的解决方案中没有这个页面。我尝试了一些JavaScript，例如

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

- Lucas Germano