CSS Grid布局行高百分比不生效问题求助

兄弟，你遇到的这个问题其实是CSS百分比高度的经典坑——很多人都会忽略它的核心工作逻辑：百分比高度的计算必须依赖父元素有一个明确的、非auto的高度值。

问题出在哪？ #

看你的代码：

• 你给.search-container设置了grid-template-rows: 30% auto auto，但这个容器本身的高度是默认的auto（由内容撑开）。浏览器没法基于一个auto的高度去计算30%是多少，所以这个30%会被解析成auto，导致后续子元素的height:100%也失去了参考。
• 另外，align-items: stretch是Grid容器的属性，你把它写在了子元素（.promo-container、.form-container）上，这根本不会生效——只有Grid容器本身设置这个属性，才能让子元素自动拉伸填满行高。

解决方案 #

我们只需要做几个小修改：

1. 先让根元素占满视口高度，给Grid容器提供高度参考

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

2. 给.search-container设置明确的高度，让它的行高百分比有计算依据

.search-container{
  display: grid;
  grid-template-columns: auto 900px 300px auto;
  grid-template-rows: 30% auto auto;
  grid-gap: 20px;
  height: 100%; /* 关键：让容器占满父元素高度 */
  align-items: stretch; /* 把这个属性移到容器上 */
}

3. 移除子元素上无效的align-items属性

.promo-container {
  background-color:blue;
  grid-column-start: 2;
  grid-column-end: 3;
  /* 删掉align-items: stretch; */
}

.form-container {
  background-color:blue;
  grid-column-start: 3;
  grid-column-end: 4;
  /* 删掉align-items: stretch; */
}

为什么这样就生效了？ #

现在.search-container的高度是视口的100%，grid-template-rows: 30% auto auto里的30%就会被计算为视口高度的30%，剩下的两行auto会自动分配剩余空间。.refine-search的height:100%就能基于它所在的Grid行的高度来计算，自然就占满整行了。

额外小技巧 #

如果你不想依赖父元素的高度，也可以用视口单位vh来定义行高，这样更直接：

.search-container{
  grid-template-rows: 30vh auto auto; /* 30vh = 视口高度的30% */
  /* 不需要设置height:100%了 */
}

内容的提问来源于stack exchange，提问作者juicy89