调整 iframe 的大小直到没有滚动条（适合内容）答案

【问题标题】：Resize iframe until there is no scrollbar(fit content)调整 iframe 的大小直到没有滚动条（适合内容）
【发布时间】：2012-02-25 05:01:28
【问题描述】：

我有一个基本的布局表，有 4 行。页眉 - 导航 - iframe - 页脚。我想要实现的是：

使正文高度（在这种情况下，iframe 所在的表格行）适合 iframe 内容高度。 iframe 只是加载我制作的其他一些 html 页面。

因此，在这种情况下，主 index.html 正文滚动条（溢出）将用于滚动 iframe。这可能吗？

如果无法将表格行高增加到 iframe 内容高度，我可以将其放在 div 中。

【问题讨论】：

您的 iframe 托管站点是否来自同一个域？编辑：我刚刚注意到你说这是你自己的其他页面。

标签： html iframe scroll height

【解决方案1】：

很遗憾，您不能在 css/html 中执行此操作。您必须使用一些 javascript。

如果这是你的 main.html...

<html>
<body>
<table width="100%" border=1>
    <tr><td>Header</td></tr>
    <tr><td>Navigation</td></tr>
    <tr><td>
        <iframe src="iframe.html">
        </iframe>
    </td></tr>
    <tr><td>footer</td></tr>
</table>    
</body>
</html>

把它放在 iframe.html...

<script type='text/javascript'>
var num=Math.ceil(Math.random()*50);
while(num-- > 0)
    document.write("num="+num+"<br/>");
window.parent.onload=function(){
    var parent=this.document.getElementsByTagName("IFRAME")[0];
    var elem=document.documentElement;
    parent.style.height=elem.scrollHeight+"px";
    parent.style.width=elem.scrollWidth+"px";
}
</script>

它将随机数量的行写入文档，然后根据其高度调整自身大小。

http://frank.bridgewater.edu/test/iframeResize/

【讨论】：

您好，脚本似乎不起作用...我一定是做错了什么。它确实增加了空间，但不适合 iframe 内容的确切高度。请注意，每次加载不同的页面时，iframe 的高度都必须更改。查看网站时还会显示 num 文本。
你还有滚动条吗？这是确切的代码frank.bridgewater.edu/test/iframeResize。一遍又一遍地重新加载页面，您应该会看到 iframe 自动调整其高度。
嗯，我认为这是因为脚本放置。我把它放在页面的底部。 iframe 虽然在表格内。我的项目中没有 iframe.html。因此，如果我将此脚本放在每个外部 html 上，它将无法识别我想的“IFRAME”部分......而且我不想使用随机高度数，它必须是外部 html 的高度（这是不同的每次）