侧边栏不拉满高度是因为高度链路断裂：根容器缺min-height: 100vh、grid容器缺min-height: 100%、或侧边栏设了align-self: start；1fr只分宽度，高度需靠stretch和完整高度链支撑。
直接用 grid-template-columns: 240px 1fr 就能实现侧边栏固定宽、主内容自适应，但高度自适应不是靠列定义本身，而是靠整个高度链路是否闭合——漏掉任一环，侧边栏看起来就“塌”了。
为什么写了 240px 1fr 侧边栏还是不拉满高度？
Grid 的 1fr 在垂直方向上没参考基准时会退化，它只管“分宽度”，不管“撑高度”。侧边栏自身不设 height，它的高度完全依赖父容器分配的高度空间。常见断点有三个：
-
body或最外层布局容器没设min-height: 100vh（或height: 100%且所有父级都有显式高度） - Grid 容器自身没继承或声明足够高度，比如漏了
min-height: 100% - 侧边栏元素设置了
align-self: start或父容器设了align-items: start，覆盖了默认的stretch行为
grid-template-rows 和 grid-template-columns 哪个管高度？
都管，但要看你怎么组织结构。如果你的侧边栏是垂直方向上的“头部/底部”，就该用 grid-template-rows；如果是左右结构（更常见），就用 grid-template-columns，此时高度自适应靠的是 Grid 容器在垂直方向上的高度约束 + 子项默认 align-self: stretch。
例如左右布局中，要让侧边栏和主内容等高，必须确保：
- Grid 容器有明确高度来源（如
min-height: 100vh） - 不给侧边栏写
height、max-height或align-self，让它自然 stretch - 如果侧边栏内部有绝对定位子元素，需加
min-height: 1px触发 BFC，否则 stretch 失效
滚动区域怎么隔离才不破坏侧边栏高度？
想侧边栏固定、主内容独立滚动，不能给 Grid 容器设 overflow，否则要么截断侧边栏，要么触发双滚动条。正确做法是把滚动行为收束到主内容区域自身：
- 主内容区域（如
<main></main>）加overflow-y: auto - 同时给它一个明确高度约束，比如
height: calc(100vh - 60px)（减去固定 header 高度）或min-height: 100%（前提是 Grid 容器高度链完整） - 侧边栏保持无
overflow、无position: sticky，Grid 列轨道已天然固定其位置
真正卡住的从来不是语法，而是高度链路上某一层悄悄用了 height: auto，或者某个嵌套子元素偷偷触发了 BFC 缺失——这些地方不报错，但侧边栏就是不肯拉高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
