如何使用 Bootstrap （我猜）让 iframe 填充剩余屏幕区域的宽度和高度？

Question

我有一些标记，然后是一个 iframe。我只是希望 iframe 填充当前标记的其余部分未占用的任何最大宽度和高度，如果这有意义的话。

代码：

<h1>Hi!</h1>

<br />
<input id="btnSave" type="button" value="Save" />
<br />
<br />
<br />

<iframe id="myI" src="mypage.html"></iframe>

所以在这种情况下，iframe应该占据屏幕的整个宽度，高度应该是从框架的顶部到屏幕的底部。什么风格可以实现这一目标？

Answer 1

在你的 CSS 中尝试一下这个。 iframe 宽度使用常规类型 100% 宽度设置，但高度设置为视口的 100%。

iframe {
  width: 100%;
  height: 100vh;
}

Answer 2

我用最简单的方法做到了：设置高度小于100%，例如

<iframe style="width: 100%;height: 95%;position: absolute" name="result"></iframe>

更准确地说，我想它可以通过js来完成。