CSS3：调整 iframe 的高度以适合其内容答案

【问题标题】：CSS3: Adjust height of iframe to fit its contentCSS3：调整 iframe 的高度以适合其内容
【发布时间】：2014-10-24 22:41:18
【问题描述】：

我是 CSS 新手，因此这个问题的解决方案可能很简单。我搜索了网络但没有找到解决方案；尽管我认为这个问题相当普遍。

我将 iframe 嵌入到 html 文档中，如下所示：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="main.css" />
  </head>
  <body>
    <p>Test</p>
    <iframe class=result-frame src="/media/converted/1409487227933_testpage.html></iframe>
  </body>
</html>

现在我想让 iframe 尽可能大以包含其所有内容。为此，我将宽度设置为 100%：

.result-frame {
   width: 100%;
}

但我不知道如何将 iframe 的高度调整为足够大以适应其内容，从而不显示滚动条。

我已经看到了一些使用 javascript 的解决方案，但我只想坚持使用 CSS/HTML。这甚至可能吗？

托比亚斯

【问题讨论】：

不，只有 HTML 和 CSS 是不可能的。

标签： html css iframe

【解决方案1】：

这在 CSS 中是不可能的。还有更多，iframe 在不同的浏览器中会以不同的方式工作。如果您从 al iPad 在 Safari 上看到它，您将看到所需的 iframe，即 100% 的高度。那里有一个错误，人们解决了将其封装在容器中并设置overflow-y: scroll; 但在其他浏览器中没有。

您可以做的是通过 javascript 获取正文的高度并为 iframe 设置相同的高度。这是一段可以工作的代码，我在这里使用 jQuery，但你可以不用 jQuery：

$('#iframe-id').height( $('#iframe-id').contents().find('body').height() );

假设你的身体高度是你的iframe的全高，如果你使用浮动元素并且你没有清除iframe你会遇到问题。

你也可以使用html标签：

$('#iframe-id').height( $('#iframe-id').contents().find('html').height() );

【讨论】：