正确做法是用固定高度轨道（如64px）加1fr，容器设height: 100vh并确保html/body高度为100%，主体行子元素设height: 100%和overflow-y: auto实现内部滚动。
grid-template-rows 用 1fr 会导致表尾被顶出视口
直接写 grid-template-rows: auto 1fr auto 看似能固定表头表尾，但中间 1fr 会让主体区域无条件占满剩余空间——哪怕内容很短，它也会撑高容器；一旦内容变多，整个容器高度就溢出，表尾就被推到页面底部以下，失去“固定在视口底边”的效果。
根本问题在于：1fr 是分配“可用空间”，不是锚定位置。它不阻止主体区域拉长容器，也就无法约束表尾始终停在视口底部。
- 若父容器没设
height或max-height，1fr行会无限撑开，滚动行为完全失控 - 即使加了
overflow-y: auto，也只作用于容器自身，表尾仍随文档流下移 -
minmax(0, 1fr)在这里无效：它解决的是子项最小尺寸干扰，不是容器高度越界
正确做法：用固定高度轨道 + overflow-y: auto 限定主体
要让表头、表尾真正“固定”在视口上下边缘，主体区域必须脱离文档流高度影响——即：主体行必须有明确高度上限，并允许内部滚动。
推荐结构：grid-template-rows: 64px 1fr 64px 配合容器 height: 100vh，但关键在主体行内部再套一层可滚动容器（如 .body-wrapper），而不是把 overflow-y: auto 直接加在 Grid 容器上。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 表头、表尾用固定值（如
64px）或min-height，避免因空内容塌陷 - 主体行保持
1fr，但它的直接子元素（如.tbody）需设height: 100%+overflow-y: auto - 务必给
html和body加height: 100%，否则1fr缺失计算基准 - 为防滚动条挤压列宽，主体容器可加
scrollbar-gutter: stable both
position: sticky 不适用于表尾固定
position: sticky 只支持 top 和 bottom 单向锚定，且依赖滚动容器边界。表尾设 bottom: 0 后，浏览器会尝试把它“粘”在滚动容器底边——但这个底边是容器自身高度的末端，不是视口底部。一旦主体内容少，容器高度不足，表尾就会上浮甚至消失。
- 表头可用
position: sticky; top: 0（前提是它是 Grid 直系子项、容器有overflow-y: auto） - 表尾不能靠
sticky实现“视口底部固定”，必须靠 Grid 轨道显式预留空间 - 试图用
margin-top: auto推表尾到底部，在 Grid 中仅对单个子项有效，不适用于多行结构
移动端视口变化会破坏 100vh 基准
在 iOS Safari 或部分 Android 浏览器中，地址栏收起/展开会动态改变 100vh 的实际像素值，导致表尾突然跳动或错位。这不是布局写错了，而是 vh 单位本身的缺陷。
- 临时缓解：用
min-height: 100dvh替代height: 100vh（dvh是动态视口单位，2023 年起主流支持） - 降级方案：JavaScript 监听
resize，动态设置容器style.height为window.innerHeight - 更稳妥的思路：放弃全高容器，改用
min-height: 100vh+ 主体区域max-height: calc(100vh - 128px)（128px = 表头+表尾高度）
主体区域高度控制是整个布局最易被忽略的一环：它既不能靠 1fr 无条件撑满，也不能靠 sticky 模拟固定，必须用轨道预留 + 内部滚动双层约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
