html iframe高度问题

如果你想让一个 iframe 标签自适应高度，可以使用 JavaScript 来实现。以下是实现的步骤：

1. 获取 iframe 元素对象

var iframe = document.getElementById('my-iframe');

2. 获取 iframe 内容的高度

var iframeBody = iframe.contentDocument.body;
var height = iframeBody.scrollHeight;

3. 设置 iframe 的高度

iframe.style.height = height + 'px';

4. 监听 iframe 内容的变化，及时更新高度

iframeBody.addEventListener('resize', function() {
  height = iframeBody.scrollHeight;
  iframe.style.height = height + 'px';
});

注意：上述代码中的 `my-iframe` 是 iframe 标签的 id 属性值，需要根据实际情况进行修改。

相关问题

html iframe高度的100%无效

如果您在使用 `<iframe>` 标签时设置了高度为 100%，但是发现它并没有生效，可能是因为它的父元素没有设置高度。在这种情况下，`<iframe>` 的高度将会自动调整以适应其内容的高度，而不是适应父元素的高度。

解决这个问题的方法是，在父元素中设置一个明确的高度，例如使用像素或百分比来设置高度。如果您希望 `<iframe>` 自适应父元素的高度，可以使用 JavaScript 来实现这一点。例如，您可以使用以下代码来设置 `<iframe>` 的高度等于其父元素的高度：

var iframe = document.querySelector('iframe');
iframe.style.height = iframe.parentElement.offsetHeight + 'px';

这会将 `<iframe>` 的高度设置为其父元素的高度，并使用像素单位进行设置。请注意，在使用此方法时，需要确保父元素已经加载完毕，否则可能会出现高度不正确的情况。

iframe高度自动撑开

要实现 iframe 高度自动撑开的效果，可以使用以下两种方法：

1. 使用 JavaScript

首先，需要在 iframe 标签中添加 onload 属性，用于在 iframe 加载完成后触发指定的 JavaScript 函数。在 JavaScript 函数中，获取 iframe 的内容高度，然后将 iframe 的高度设置为内容高度即可。

示例代码如下：

<iframe src="example.html" onload="resizeIframe(this)"></iframe>

<script>
function resizeIframe(obj) {
  obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>

2. 使用 CSS

另一种方法是使用 CSS 中的 `height: 100%`，让 iframe 的高度自动适应其父元素的高度。同时，需要设置 iframe 的父元素的高度为 `auto`，以便自动适应 iframe 的高度。

示例代码如下：

<div style="height: auto;">
  <iframe src="example.html" style="height: 100%;"></iframe>
</div>

需要注意的是，使用 CSS 方法时，需要保证 iframe 的父元素能够自动适应其内容高度，否则 iframe 的高度仍然无法自动撑开。