如何使用Bootstrap实现iframe填充屏幕剩余的宽度与高度

推荐使用兼容性更好、无需手动计算高度的Flex布局方案：

• 首先重置html、body的默认边距，设置高度占满整个视口
• 将body设置为纵向排列的flex容器，内部元素按垂直方向排布
• 给iframe设置flex-grow: 1属性，自动填充所有剩余垂直空间，同时设置宽度100%占满全宽，去掉iframe默认自带的边框

完整实现代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  flex-direction: column;
}
#myI {
  width: 100%;
  flex-grow: 1;
  border: none;
}
</style>
</head>
<body>
<h1>Hi!</h1>

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

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

如果不希望修改body的全局布局，也可以使用calc计算方案作为备选，前提是你可以确定顶部所有元素的总高度，示例如下：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#myI {
  width: 100%;
  /* 110px需要替换为你实际页面顶部内容的总高度 */
  height: calc(100vh - 110px);
  border: none;
}

该方案的缺点是如果顶部内容高度发生变化（比如文字换行、元素增减），需要手动调整calc内的数值，否则会出现滚动条或者底部留白。

内容的提问来源于stack exchange，提问作者E.D.