100%对于宽度和高度的作用不同。

当您指定width:100%时，意味着“从父元素或窗口的宽度中占用可用宽度的100%”

当您指定height:100%时，它只意味着“从父元素占用可用高度的100%”。这意味着如果不在顶层元素处指定高度，则所有子元素的高度将为0或父元素的高度，这就是为什么您需要将最顶层元素设置为窗口高度的最小高度。

我总是指定车身的最小高度为100vh，这使得定位和计算变得容易，

body {
  min-height: 100vh;
}

尝试一下。。。

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

尝试在html和body中设置高度：100%

html, 
body {
    height: 100%;
}

如果您想要2个div高度相同，请使用或设置父元素display：flex属性。

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

您可以使用以下CSS使div达到浏览器窗口高度的100%：

display: block;
position: relative;
bottom: 0;
height: 100%;

如果要设置＜div＞或任何元素的高度，也应该将＜body＞和＜html＞的高度设置为100%。然后可以将元素的高度设置为100%：）

下面是一个示例：

body, html {
  height: 100%;
}

#right {
  height: 100%;
}