Html 自动设置iframe高度

我需要在框架中嵌入一个HTML页面，并使用以下代码：

<iframe src="http://www.google.com" style="width: 90%; height: 300px"
    scrolling="no" marginwidth="0" marginheight="0" frameborder="0"
    vspace="0" hspace="0">

---

我正在尝试将高度设置为自动，以便框架自动调整到页面长度，而不必像我在这里所做的那样硬编码高度。我尝试了

height:auto

和

height:inherit

，但没有成功。

如果站点位于不同的域上，由于跨浏览器域限制，调用页面无法访问iframe的高度。如果您可以访问这两个站点，则可以使用。那么anroesti的链接应该会有所帮助。

试试这个编码

<div>
    <iframe id='iframe2' src="Mypage.aspx" frameborder="0" style="overflow: hidden; height: 100%;
        width: 100%; position: absolute;"></iframe>
</div>

---

如果使用类似引导的框架，可以使用以下代码片段使任何iframe视频响应：

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="vid.mp4" allowfullscreen></iframe>
</div>

---

Solomon关于bootstrap的回答启发我添加了bootstrap解决方案使用的CSS，这对我来说非常有效

.iframe-embed {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    border: 0;
}
.iframe-embed-wrapper {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
}
.iframe-embed-responsive-16by9 {
    padding-bottom: 56.25%;
}
<div class="iframe-embed-wrapper iframe-embed-responsive-16by9">
    <iframe class="iframe-embed" src="vid.mp4"></iframe>
</div>

.iframe嵌入{
位置：绝对位置；
排名：0；
左：0；
底部：0；
身高：100%；
宽度：100%；
边界：0；
}
.iframe嵌入包装器{
位置：相对位置；
显示：块；
身高：0；
填充：0；
溢出：隐藏；
}
.iframe-embed-responsive-16by9{
垫底：56.25%；
}

您是否尝试过设置

高度：100%

如果iframe位于正文中，那么它应该填充正文？重复：或者两者都可以回答您的问题。GitHub上的这个库解决了跨域问题，同时确保在情况发生变化时iframe的大小与内容保持一致。注意：我发现使用样式“高度”和“宽度”很容易出错。“高度”和“宽度”属性在这里是很重要的，它们似乎始终有效。您使用这两个选项有什么原因吗？%on iframe的高度/宽度根据规范是无效的HTML5（尽管之前是有效的），太棒了！我必须去掉

高度：0但除此之外，它的工作完美无瑕，这是一个iframe中的角度页面，托管在旧gwt应用程序中的可调整大小的模式弹出窗口中！于2020年9月在当前Chrome上工作。谢谢