使用百分比行高的Grid布局中，Grid区域无法移动到指定行

我完全懂你的困扰——已经把蓝色矩形放到正确的列了，但就是没法让它乖乖待在目标行里，对吧？咱们来拆解一下问题，一步步搞定它。

问题根源分析 #

你的代码里有几个容易忽略的点：

1. 父元素高度未明确设置：body的grid-template-rows用了百分比，但body和html默认没有100%的高度，导致百分比行高无法按预期生效，行的实际高度可能远小于你想的80%。
2. 元素高度冲突：你给#navigation设了固定的height:400px，如果第二行的实际高度（基于百分比）小于400px，元素会溢出，看起来就像不在正确的行里。
3. 未处理其他元素的布局：页面里的menunBar和mainContent没有指定网格位置，浏览器会自动把它们塞进网格的第一个可用单元格，可能挤占了#navigation的目标行空间。

解决方案 #

下面是调整后的完整代码，我会逐点说明改动：

/* 先给html和body设置100%高度，确保百分比行高生效 */
html, body {
  height: 100%;
  margin: 0; /* 去掉默认边距，避免不必要的滚动条 */
}

body {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 grid-template-rows: 10% 80% 10%;
}

#navigation {
 grid-column: 2; /* 等价于2/3，写法更简洁，明确指定第二列 */
 grid-row: 2; /* 指定放在第二行 */
 height: 100%; /* 改为100%，让元素填满所在行的高度，避免溢出 */
 width: 100%;
 background-color: blue;
}

/* 给其他元素也指定网格位置，避免干扰#navigation的布局 */
#menunBar {
 grid-column: 1 / -1; /* 占据所有列 */
 grid-row: 1; /* 放在第一行 */
 background-color: #ccc;
}

#mainContent {
 grid-column: 1 / -1; /* 占据所有列 */
 grid-row: 3; /* 放在第三行 */
 background-color: #eee;
}

<!-- 可以调整元素顺序，让结构更符合布局逻辑，不影响Grid定位 -->
<div id="menunBar">导航栏</div>
<div id="navigation"></div>
<div id="mainContent">主内容区</div>

关键改动说明 #

• 给html和body设置height:100%，让网格的百分比行高基于整个视口高度计算，第二行就能稳定占据80%的视口空间。
• 把#navigation的height改成100%，让它完全填满第二行的高度，不会出现溢出或位置偏移。
• 给另外两个元素明确指定网格位置，避免浏览器自动布局时挤占#navigation的目标行。

这样调整后，蓝色矩形就能稳稳地待在第二列第二行的位置啦！

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