我有一个包含两列的布局-左div和右div。
右侧的div具有灰色背景色，我需要它根据用户浏览器窗口的高度垂直展开。现在，背景色结束于该分区中的最后一段内容。
我尝试过高度：100%，最小高度：100%；，等
当前回答
这就是对我有用的：
<div style=“位置：固定；顶部：0px；左侧：0px，底部：0px
使用position:fixed而不是position:absolute，这样即使向下滚动分区也会扩展到屏幕的末尾。
其他回答
与flex模型解决方案相比，所有其他解决方案，包括投票最高的vh解决方案都是次优的。
随着CSS flex模型的出现，解决100%高度问题变得非常非常简单：使用高度：100%；显示：父元素上显示flex，子元素上显示flex:1。它们将自动占用容器中的所有可用空间。
注意标记和CSS是多么简单。没有桌子黑客之类的。
所有主要浏览器以及IE11+都支持flex模型。
html，正文{高度：100%；}正文{显示：柔性；}.左，.右{挠曲：1；}.左侧{背景：橙色；}.对{背景：青色；}<div class=“left”>左</div><div class=“right”>右</div>
在这里了解有关flex模型的更多信息。
添加最小高度：100%，不指定高度（或将其设置为自动）。它完全帮了我的忙：
.container{
margin: auto;
background-color: #909090;
width: 60%;
padding: none;
min-height: 100%;
}
使用FlexBox CSS
Flexbox非常适合这类问题。虽然Flexbox主要以水平方向布局内容而闻名，但它实际上同样适用于垂直布局问题。您所要做的就是将垂直部分包装在柔性容器中，并选择要展开的部分。它们将自动占用容器中的所有可用空间。
这就是对我有用的：
<div style=“位置：固定；顶部：0px；左侧：0px，底部：0px
使用position:fixed而不是position:absolute，这样即使向下滚动分区也会扩展到屏幕的末尾。
实际上，对我最有效的是使用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);
}
