尝试此操作-已测试：

body {
  min-height: 100%;
}

#right, #left {
  height: 100%;
}

在以后的版本中，您可以使用vh：

#right, #left {
  height: 100vh
}

实际上，对我最有效的是使用vh属性。

在我的React应用程序中，我希望即使调整大小，div也能与页面高度匹配。我尝试了高度：100%；，溢出-y：自动；，但在设定高度时，它们都不起作用：（你的百分比）vh；它按预期工作。

注意：如果您正在使用填充、圆角等，请确保从vh属性百分比中减去这些值，否则会增加额外的高度并显示滚动条。这是我的示例：

.frame {
  background-color: rgb(33, 2, 211);
  height: 96vh;
  padding: 1% 3% 2% 3%;
  border: 1px solid rgb(212, 248, 203);
  border-radius: 10px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 50px 100px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr);
}

.包装器{显示：-webkit框；显示：-ms flexbox；显示：柔性；-ms-flex-wrap:包裹；柔性包裹：包裹；高度：100vh；/*高度窗口（vh）*/}.包装器.左侧{宽度：80%；/*宽度可选，但建议使用*/}.包装器.右侧{宽度：20%；/*宽度可选，但建议使用*/背景色：#DD1F26；}<!--vw：视口宽度的百分之一。vh：视口高度的百分之一。vmin：视口宽度或高度中较小者的百分之一。vmax：视口宽度或高度中较大者的百分之一。--><div class=“wrapper”><div class=“left”>左边</div><div class=“right”>正确的</div></div>

如果你能绝对定位你的元素，

position: absolute;
top: 0;
bottom: 0;

会做到这一点。

非常简单的解决方案，支持跨域，还支持浏览器重新调整大小。

<div style="height: 100vh;">
   <iframe src="..." width="100%" height="80%"></iframe>
</div>

根据需要调整iframe高度属性（将div高度属性保留为100vh）。

为什么80%？在我的真实场景中，我在div中的iframe之前有一个标头，这会占用一些垂直空间-因此我将iframe设置为使用80%而不是100%（否则它将是包含div的高度，但从标头之后开始，并溢出div的底部）。

有几种方法可用于将＜div＞的高度设置为100%。

方法（A）：

html，正文{高度：100%；最小高度：100%；}.div左{高度：100%；宽度：50%；背景：绿色；}.div右{高度：100%；宽度：50%；背景：灰色；}<div class=“div left”></div><div class=“div right”></div>

方法（B）使用vh：

html，正文{高度：100%；最小高度：100%；}.div左{高度：100vh；宽度：50%；背景：绿色；浮动：左侧；}.div右{高度：100vh；宽度：50%；背景：灰色；浮动：右侧；}<div class=“div left”></div><div class=“div right”></div>

方法（c）使用挠性箱：

html，正文{高度：100%；最小高度：100%；}.包装器{高度：100%；最小高度：100%；显示：柔性；}.div左{宽度：50%；背景：绿色；}.div右{宽度：50%；背景：灰色；}<div class=“wrapper”><div class=“div left”></div><div class=“div right”></div></div>