您可以使用显示器：flex和高度：100vh

html，正文{高度：100%；边距：0px；}正文{显示：柔性；}.左，.右{挠曲：1；}.左侧{背景：橙色；}.对{背景：青色；}<div class=“left”>左</div><div class=“right”>右</div>

添加最小高度：100%，不指定高度（或将其设置为自动）。它完全帮了我的忙：

.container{     
    margin: auto;
    background-color: #909090;
    width: 60%;
    padding: none;
    min-height: 100%;
}

使用FlexBox CSS

Flexbox非常适合这类问题。虽然Flexbox主要以水平方向布局内容而闻名，但它实际上同样适用于垂直布局问题。您所要做的就是将垂直部分包装在柔性容器中，并选择要展开的部分。它们将自动占用容器中的所有可用空间。

实际上，对我最有效的是使用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);
}

尝试在身体上使用“height:100%”。

只需使用“vh”单位而不是“px”，这意味着查看端口高度。

height: 100vh;