如何制作自适应 iFrame 高度？答案

【问题标题】：How to make adaptive iFrame height?如何制作自适应 iFrame 高度？
【发布时间】：2020-01-17 14:44:25
【问题描述】：

我正在尝试根据窗口大小使 iFrame 自适应。我几乎完成了，但在电话模式下它坏了，不知道为什么。我使用了很多关于如何对齐 iFrame 的示例，但没有一个效果很好。此外，您在下面的屏幕截图中看到的空间不会出现在 html 或 css 中，而且看起来这个空间根本就没有 body 或 html。任何想法可能是什么？我正在使用带有剃须刀页面的 asp.net 核心 Web 应用程序。 iFrame 在 div 标签内主标签内有什么

这是我的 CSS 代码

.AdaptiveIframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
}

.AdaptiveIframe {
  position: relative;
  padding-bottom: 100%;
  height: 100%;
  width: 100%;
}

html

<main role="main">
    <div class="AdaptiveIframe">
        <iframe frameborder="0">Oops! Your browser does not support iframe.</iframe>
    </div>
    @RenderBody()
</main>

【问题讨论】：

移除相关容器类的高度 - 填充将为容器提供高度
感谢您的回复，我已经在下面发布了答案，但我欢迎您认为更好的解决方法

标签： html css asp.net-core web-applications

【解决方案1】：

我突然找到了答案。这是我的CSS代码。但如果还有什么需要解决的问题，我欢迎提出任何建议。

.AdaptiveIframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 150%;
  height: 150%;
}

.AdaptiveIframe {
  position: relative;
  padding-bottom: 150%;
}

【讨论】：