Grid容器设置height:100%无效，改用min-height:100vh生效的原因

核心原因：百分比高度依赖父元素的明确height值 #

CSS里的height: 100%生效有个硬性前提：父元素必须设置了明确的height属性值，仅靠min-height定义高度范围是不行的。

你的代码中，body只设置了min-height: 100vh——这仅规定了body的高度「至少是视口高度」，但如果body内部内容不足100vh，它的实际计算高度还是由内容撑开的高度，并没有一个固定的height值。这种情况下，.container的height: 100%找不到可继承的确定高度，浏览器会直接忽略这个百分比设置，容器高度默认是auto（由自身内容决定），所以看起来没占满视口。

而当你给.container设置min-height: 100vh时，这个属性直接基于视口高度计算，不需要依赖父元素的高度设置，容器会直接以视口高度为最小高度，自然占满整个屏幕。

可选解决方法（让百分比高度生效） #

如果想保留.container的height: 100%，需要给父链上的元素都设置明确的height值：

html, body {
  height: 100%;
  margin: 0; /* 清除默认边距，避免出现滚动条 */
}

.container {
  background-color: red;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  height: 100%;
}

这样html和body都有了明确的100%高度（继承自视口），.container的height:100%就能正常继承父元素高度，占满整个视口。

内容的提问来源于stack exchange，提问作者Hoàng Trọng Tùng