1. CSS Grid 布局中的高度继承原理
1.1 高度继承的基本认知
在 CSS 体系中，高度并非真正的继承，子元素通常会根据内容来决定自身高度。只有当父元素设定了一个确定的高度时，子元素的 height: 100% 才能稳定地填充父容器的高度，否则子元素可能仍以内容高度为准，从而导致局部区域没有达到预期的填充效果。
在讨论 父子高度继承原理 时，重点是区分“高度是否可继承”与“高度是否有参照”。网格场景下，子项要想百分比高度生效，通常需要父网格轨道具以明确高度存在。这是对 CSS Grid 模式下高度行为的核心认知。
1.2 Grid 的行高和轨道高度如何影响子项高度
在 CSS Grid 中，网格项的高度并非由子项自行决定，而是受网格轨道高度影响。网格轨道高度由 grid-template-rows、grid-auto-rows 以及内容高度共同决定，只有为轨道定义了明确高度，子项的 height: 100% 才能起作用，从而实现整格区域的填充。
常用的做法是给网格容器设定一个明确高度，例如 height: 600px，或使用视口单位如 100vh，然后让子项使用 height: 100%，从而实现整行/整列的填充效果。
/* 示例：父网格容器设定明确高度，子网格项使用 height: 100% 填充轨道高度 */
.grid {display: grid;grid-template-columns: 260px 1fr;height: 540px; /* 父容器高度，确保子项有参考高度 */
}
.grid > .sidebar,
.grid > .content {height: 100%; /* 填充父轨道高度 */
}
2. height: 100% 在 CSS Grid 的实战应用
2.1 如何确保父节点具备确定高度
要使 height: 100% 真正有效，父级必须具备一个确定的高度。若父级高度为 auto，子项的百分比高度可能无法正确解析或无法实现填充效果，因此要么给父级设定具体高度，要么将父级高度限定为上述可预测的单位。
在实际布局中，常用的做法包括设置 height: 100% 的父容器，或使用固定高度的父容器，例如 height: 500px，甚至结合视口单位实现全局自适应，这些都能让子项的 height: 100% 找到稳定的参照。
2.2 把高度传递给嵌套网格的策略
当网格中嵌套了另一层网格时，确保父网格项的高度同样为 100%，并在子网格上设置 height: 100%，以实现“子网格填充父网格”的效果。利用 align-items: stretch 也有助于把网格项在纵向拉伸至轨道高度，从而维持一致外观。
实际做法通常包括：外层网格容器设定明确高度，内层网格项统一设为 height: 100%，并通过合适的轨道定义确保每一层都能正确填充。
/* 嵌套网格示例：左列固定宽度，右列填充高度，右列内部再分区域 */
.grid {display: grid;grid-template-columns: 260px 1fr;height: 600px;
}
.grid > .sidebar { height: 100%; }
.grid > .main {height: 100%;display: grid;grid-template-rows: 60px 1fr; /* 顶部固定条，主体区域自适应 */
}
.grid .main > .header { height: 100%; }
.grid .main > .body { height: 100%; overflow: auto; }
3. 实战案例：实现自适应高度的两列网格布局
3.1 案例目标与实现要点
目标是让左侧导航栏保持固定宽度、与右侧内容同高，同时右侧区域内部可继续分区。明确的父高度和子项高度设定是关键，只有这样才能确保两列就位时高度一致，避免内容错位。
实现要点包括：使用 grid-template-columns 定义两列，给父网格容器设定一个确定高度，并在子项中使用 height: 100%，使左、右两列都能达到同一高度。
3.2 最小可用高度与滚动处理
在实际场景中，主体区域可能需要滚动，因此对右侧主体区域设定 overflow: auto，同时确保头部区域不会被滚动遮挡。通过将内部区域进一步设为网格，且子网格项高度为 100%，可以实现复杂布局的稳定性。
在调试时，检查每一层容器的高度是否都具备明确参照，逐级确保 height: 100% 的传递链完整无缺以避免“高度崩塌”的情况。
/* 完整示例：两列自适应高度 + 右侧区域可滚动 */
.grid {display: grid;grid-template-columns: 280px 1fr;height: 80vh; /* 视口高度，确保页面自适应 */border: 1px solid #ddd;
}
.grid > .sidebar { height: 100%; background:#f7f7f7; }
.grid > .main {height: 100%;display: grid;grid-template-rows: 72px 1fr;
}
.grid .main > .header { height: 100%; background:#fff; }
.grid .main > .body { height: 100%; overflow: auto; padding: 16px; }
4. 注意事项与调试技巧
4.1 保证父级高度的确定性
百分比高度的生效前提是父级高度明确，通常通过 height、min-height 或固定单位实现；如果父级高度不确定，percent height 将很难按预期工作，因此在设计阶段就要把父级高度定死或定好机制。
在调试阶段，建议使用浏览器开发者工具的盒模型与布局边界检查功能，逐层追踪高度来源，确保轨道高度与子项高度的关系清晰可控。
4.2 使用 align-items 或 justify-items 强化填充
通过 align-items: stretch 可以让网格项在纵向填充轨道高度，若遇到内容被拉伸导致排版问题，可以显式设定 align-items: start、center 或者对特定网格项单独设置高度。
在复杂布局中，推荐先为外层网格设定明确高度，再为内部嵌套的网格逐层添加 height: 100%，以保持整体验证的一致性与稳定性。
/* grid 项自动填充时的注意点 */
.grid {display: grid;grid-template-columns: 200px 1fr;height: 520px;align-items: stretch; /* 默认，但如需更精确控制可改 */
}
.grid > div { height: 100%; }
5. 浏览器行为差异与兼容性要点
5.1 对高度百分比的兼容性影响
当前主流浏览器对 CSS Grid 的实现已高度一致，但在极端嵌套和滚动场景中，高度百分比的解析可能存在微小差异。为了稳健性，推荐结合具体的页面结构进行测试，确保在目标设备上的表现一致。
在正式部署前，请确保对关键布局进行跨浏览器测试，覆盖 Chrome、Edge、Firefox、Safari 等主流浏览器版本，避免出现高度无法填充的情况。
5.2 兼容性测试的小贴士
进行兼容性测试时，建议在至少一个主流浏览器上进行可视化验证，结合开发者工具的布局/盒模型调试，追踪轨道高度和元素高度的变化，以快速定位问题来源。
若需要跨平台一致性，可以考虑将某些高度策略固定为视口单位（如 height: 100vh）或使用最小高度（min-height），以提升容错性并降低因父级高度不可用导致的覆盖问题。
/* 对高度百分比兼容性不确定时的兜底方案 */
.grid {display: grid;grid-template-columns: 260px 1fr;height: 100vh;
}
.grid > .sidebar { height: 100%; }
.grid > .main { height: 100%; }
