我有一个包含两列的布局-左div和右div。
右侧的div具有灰色背景色，我需要它根据用户浏览器窗口的高度垂直展开。现在，背景色结束于该分区中的最后一段内容。
我尝试过高度：100%，最小高度：100%；，等
当前回答
如果你能绝对定位你的元素，
position: absolute;
top: 0;
bottom: 0;
会做到这一点。
其他回答
实际上，对我最有效的是使用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);
}
在这种情况下，可以使用vh，它是相对于视口高度的1%。。。
这意味着，如果你想掩盖高度，只需使用100vh。
请看下面我在这里为您绘制的图像：
尝试我为您创建的代码段，如下所示：
.左侧{高度：100vh；宽度：50%；背景色：灰色；浮动：左侧；}.对{高度：100vh；宽度：50%；背景色：红色；浮动：右侧；}<div class=“left”></div><div class=“right”></div>
尝试此操作-已测试：
body {
min-height: 100%;
}
#right, #left {
height: 100%;
}
在以后的版本中，您可以使用vh：
#right, #left {
height: 100vh
}
你需要做两件事，一是将高度设置为你已经做到的100%。第二个是将位置设置为绝对位置。这应该会奏效。
html,
body {
height: 100%;
min-height: 100%;
position: absolute;
}
来源
非常简单的解决方案，支持跨域，还支持浏览器重新调整大小。
<div style="height: 100vh;">
<iframe src="..." width="100%" height="80%"></iframe>
</div>
根据需要调整iframe高度属性（将div高度属性保留为100vh）。
为什么80%？在我的真实场景中，我在div中的iframe之前有一个标头，这会占用一些垂直空间-因此我将iframe设置为使用80%而不是100%（否则它将是包含div的高度，但从标头之后开始，并溢出div的底部）。
