在 div 中嵌入 iframe，并让 div 成为 iframe 文档的全高答案

【问题标题】：Embed an iframe in a div, and have div be full height of iframes document在 div 中嵌入 iframe，并让 div 成为 iframe 文档的全高
【发布时间】：2014-07-10 13:02:05
【问题描述】：

我在 div 中嵌入了 iframe。如何使该容器 div 成为 iframe 文档的全高？

<div>
  <iframe width=100% height=100% frameborder=0 src='https://www.graf.ly/dashboards/111?embed=1'></iframe>
</div>

http://jsfiddle.net/3e794/

【问题讨论】：

标签： html css iframe height

【解决方案1】：

您还需要将父元素高度设置为100%...

html, body, div.wrap-frame {
    height: 100%;
}

Demo

如果您想摆脱多个滚动条，请使用

iframe {
    display: block;
}

因为 iframe 会导致底部出现空白，因此将几个像素添加到 100% 会导致多次垂直滚动...

Demo 2

请注意，我使用 class 作为包装器 div 元素，这样我就不必使用通用元素选择器/类型选择器。

另外，有引用属性值的习惯。

【讨论】：

感谢 Alien 先生，这很有趣 - 我认为 height: 100% 会将容器 div 设置为包含页面的 HTML 文档的高度，而不是 iframe 的高度。不是这样吗？
@DonnyP 当您对任何元素使用 height: 100%; 时，如果父高度设置为默认值 auto ，它将失败，在您的情况下，div 元素没有高度，因此为 100 % 什么？它失败了:)

【解决方案2】：

首先，您需要 iframe 是完整文档的高度。有一种 JQuery 方法，或者您可以使用 vanilla 方法，但您无法在 fiddler 上对其进行测试以解决 iframe 域安全问题。

var h = $("iframe").contents().find("html").height();
$("iframe").height(h);

【讨论】：

【解决方案3】：

  <div id="content1"></div>
<script>
document.getElementById("content1").innerHTML='<object type="text/html" data="header.php" ></object>';
</script>

【讨论】：

请在您的回答中添加一些解释。