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

Posted 2023-02-22

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

【英文标题】：How to have iframe fill width and height of remaining screen area, using Bootstrap ( I guess)?

【发布时间】：2021-12-24 09:32:55

【问题描述】：

我有一些标记，然后是 iframe。如果有意义的话，我只希望 iframe 填充当前没有被其余标记占用的最大宽度和高度。

代码：

<h1>Hi!</h1>

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

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

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

【参考方案1】：

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

iframe 
  width: 100%;
  height: 100vh;

【讨论】：

这给了我一个关于框架上方标记高度的垂直滚动条