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

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);
}

尝试此操作-已测试：

body {
  min-height: 100%;
}

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

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

#right, #left {
  height: 100vh
}

此内容将根据您的浏览器。我希望这对你有用。试试这个例子下文给出。

您只需设置高度：100%。

html，正文{高度：100%；边距：0；}.内容{高度：100%；最小高度：100%；位置：相对；}.剩余内容{高度：自动；最小高度：100%；浮动：左侧；背景：#ddd；宽度：50%；位置：相对；}#一个{背景：url(http://cloud.niklausgerber.com/1a2n2I3J1h0M/red.png)中央无重复滚动#aaa；宽度：50%；位置：相对；浮动：左侧；}#两个{背景：url(http://cloud.niklausgerber.com/1b0r2D2Z1y0J/dark-red.png)中央无重复滚动#520E24；宽度：50%；浮动：左侧；位置：相对；overflow-y：滚动；}<div class='content'id='one'></div><div class='content-left'id='wo'></div>

默认情况下，块元素使用其父元素的整个宽度。

这就是它们如何满足垂直堆叠的设计要求。

9.4.1块格式化上下文在块格式化上下文中，垂直，从包含块的顶部开始。

然而，这种行为不会延伸到高度。

默认情况下，大多数元素都是其内容的高度（高度：auto）。

与宽度不同，如果需要额外空间，则需要指定高度。

因此，请记住以下两点：

除非需要全宽，否则需要定义块元素的宽度除非需要内容高度，否则需要定义元素的高度

.联系人{显示：flex；/*默认情况下为全宽*/最小高度：100vh；/*至少使用视口的全高度*/}.左侧{弹性：0 0 60%；背景色：番茄；}.对{挠曲：1；背景色：粉色；}body｛margin:0；｝/*删除默认边距*/<div class=“联系人”><section class=“left”><div class=“”><h1>Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。在最低限度的威尼斯，quis nostrud exerciation ullamco labour nisi Ut aliquip ex a commo consequat。这是一个很好的例子。除了你偶尔犯下的错误外，你还得承担责任，这是因为你在实验室里表现得很糟糕</h1></div></section><section class=“right”><img/></section></div>

尝试一下。。。

* {填充：0；边距：0；}.父目录{溢出：隐藏；清晰：两者都有；颜色：#FFF；文本对齐：居中；}.left_div{浮动：左侧；高度：100vh；宽度：50%；背景色：蓝色；}.右_右{浮动：右侧；高度：100vh；宽度：50%；背景色：绿色；}<div class=“parent_div”><div class=“left_div”>左</div><div class=“right_div”>右</div></div>