HTML 制作一个IFRAME自动调整页面大小

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML 制作一个IFRAME自动调整页面大小相关的知识，希望对你有一定的参考价值。

<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="bar.css" />
    <title>Title of the document</title>
</head>
<body>
    <div id="bar">bar content</div>
    <iframe id="frame" src="_"  />
</body>

*******
CSS
*******

body {
padding: 0px;
margin: 0px;
}

#frame {
border: none;
width: 100%;
height: 100%;
}

#bar {
height: 50px;
border-bottom: 3px solid #000000;
}

禁用 iframe 自动调整大小

【中文标题】禁用 iframe 自动调整大小【英文标题】：disable iframe auto resize 【发布时间】：2011-10-27 17:04:41 【问题描述】：

我正在处理一个包含 iframe 的网页。 iframe 中有相当多的数据，每次加载时，它的高度都会扩展到内容的范围。但是，这会使我的页面退出。有没有办法锁定 iframe 的高度并允许用户滚动浏览内容？？

【问题讨论】：

好的，这样就可以了。但是不内移动网站？嗯…… 这在 ipad 上默认发生 【参考方案1】：

注意 iOS。它有点搞砸了：

http://salomvary.github.io/iframe-resize-ios-safari.html

how to properly display an iFrame in mobile safari

【讨论】：

无论我做什么，似乎都将 iframe 调整为整页大小。大声笑 @filthy_wizard 是的，我放弃了。幸运的是，我所做的只是为了测试目的。会很有趣，所以看看它们是否会随着嵌入式组件变得更大（例如 Angular 元素）而改变一些东西 虽然想想也许他们不使用 iframe【参考方案2】：

嗯，奇怪...你有这个问题的示例链接吗？

当我尝试一个简单的 iframe 时： http://jsfiddle.net/mP6wT/5/

<iframe src="http://example.org/"></iframe>

默认情况下它的尺寸似乎很小，并且在 Chrome/FF/Win 中滚动...而不是调整到高度...

但无论如何，您应该能够使用 CSS 锁定高度： http://jsfiddle.net/mP6wT/7/

<iframe src="http://example.org/" style="height:400px;"></iframe>

【讨论】：

【参考方案3】：

您的 iframe 可能设置了 height: 100%;，甚至是通过某种脚本设置了高度。从技术上讲，您可以设置高度 &lt;iframe height="300"&gt;&lt;/iframe&gt; 或 &lt;ifreame style="height: 300px;"&gt;&lt;/iframe&gt; = 300px 的高度。

由于您没有提供任何代码，我无法为您提供更多帮助 :( 提供您的实时示例或代码，然后我们可以为您提供更好的帮助。但通常，要么尝试手动设置 iframe 高度，然后重新检查您的页面代码..也许某些脚本正在设置高度或者 iframe 内的代码..

【讨论】：

【参考方案4】：

给 iframe 一个固定的高度并自动滚动，你应该会很好。

<iframe  scroll="auto"></iframe>

请注意，100px 只是一个示例，您可能需要选择适合您的高度。

【讨论】：

以上是关于HTML 制作一个IFRAME自动调整页面大小的主要内容，如果未能解决你的问题，请参考以下文章

禁用 iframe 自动调整大小

怎么让iframe的大小跟随内容的大小自动调整?

html 自动Iframe调整大小没有跨源问题

将 iframe 内容高度设置为动态自动调整大小

跨域 iframe 调整大小？

动态调整 iframe 大小