Html 如何使iFrame高度自适应？

我正在尝试根据窗口大小使iFrame自适应。我几乎完成了，但在电话模式下它断了，不知道为什么。我使用了很多关于如何对齐iFrame的示例，但没有一个很好地工作。此外，您在下面的屏幕截图上看到的空间并没有出现在html或css中，而且看起来这个空间根本不在正文或html中。你知道那是什么吗？我正在使用asp.net核心web应用程序和razor页面。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

哎呀！您的浏览器不支持iframe。
@RenderBody（）

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

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

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

---

删除相对容器类上的高度-填充将为容器提供高度谢谢你的回答，我已经在下面发布了答案，但是我欢迎你认为更好的解决方法

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

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