1fr 分配父容器剩余可用空间，需父容器有明确高度（如 height: 100vh 或 min-height: 100dvh），否则失效；常见问题包括塌陷、滚动异常，须确保高度链完整并合理设置子项 min-height: 0 和 footer{height: min-content}。
用 1fr 定义该行，前提是父容器有明确高度上下文
直接写 grid-template-rows: auto 1fr auto 不会生效，除非父容器本身已具备可计算的高度（比如 height: 100vh 或 min-height: 100dvh）。1fr 不是“填满屏幕”，而是“分配当前容器剩余可用空间”——如果父容器高度为 auto 或未继承，1fr 就无空间可分。
常见错误现象：main 区域高度塌陷、内容只占一行高、滚动条意外出现。
- 必须给 Grid 容器设
height: 100vh（兼容性好）或min-height: 100dvh（推荐用于移动端，规避 Safari 地址栏跳变） - 若父级是 flex 容器，需确认它没被
flex-basis: auto截断高度链；必要时加width: 100%或flex: 1 - 别在 Grid 容器上同时写
height: 100%和height: 100vh，后者会覆盖前者且语义更清晰
grid-template-rows: auto 1fr 0 能把 footer “推走”，但得加 height: min-content
想让 main 填满视口、footer 保留在 DOM 里但不可见？用 auto 1fr 0 是对的，但第三行设为 0 后，.footer 元素仍按默认 height: auto 渲染，会撑开整行甚至溢出。
关键补丁就一句：.footer { height: min-content; }。它让 footer 脱离 0 行轨道的约束，按自身内容自然撑开——而由于轨道高度为 0，它就被“挤”到可视区域外。
- 不能用
display: none或visibility: hidden，否则 JS 拿不到元素或无法监听 scroll -
height: fit-content或height: auto在部分旧浏览器中行为不一致，min-content更稳妥 - 如果 footer 有 margin/border/padding，记得用
box-sizing: border-box避免额外高度干扰
别用 minmax(0, 1fr) 替代 1fr 填剩余高度
minmax(0, 1fr) 看似更“安全”，实则在 Safari 15.6 和某些 Android WebView 中会降级为 minmax(0, max-content)，导致该行高度失控、内容堆叠或换行异常。
真正需要弹性收缩的场景（如响应式列），才用 minmax()；单行填高，1fr 就是最简最稳的选择。
-
1fr是标准行为，所有现代浏览器解析一致 - 若担心内容超长撑破容器，应配合
overflow: auto或max-height: 100vh控制，而非改用minmax - 写了
minmax(200px, 1fr)却发现高度卡死？那是第一个参数锁死了最小值，不是1fr失效
当 1fr 看似没生效，先检查 gap 和子项 min-height
明明写了 grid-template-rows: auto 1fr，但第二行还是没撑开——大概率是 gap 或子项自身限制了伸展。
gap 会从总高度中扣除，但它不影响 1fr 计算逻辑；真正卡住的是子项的 min-height: auto（尤其是含图片、flex 子项或长文本的元素）。
- 给
1fr行内的直接子元素加min-height: 0，解除默认锁定 - 如果子元素是
display: flex容器，它也会继承min-height: auto，同样要加min-height: 0 -
gap在最后一行下方仍会留空，造成“底部多出空白”的错觉，可通过padding-bottom: -补偿（慎用），或改用margin替代
实际最易忽略的点：Grid 行高是否真正“有空间可分”，取决于**从 html → body → container 的每一层是否切断了高度链**。哪怕只漏掉一个 height: 100% 或 min-height: 100dvh，1fr 就只是个摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
