CSS3：调整 iframe 的高度以适合其内容
Posted
技术标签:
【中文标题】CSS3：调整 iframe 的高度以适合其内容【英文标题】：CSS3: Adjust height of iframe to fit its content 【发布时间】：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 是不可能的。 【参考方案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() );
【讨论】：
以上是关于CSS3：调整 iframe 的高度以适合其内容的主要内容，如果未能解决你的问题，请参考以下文章