body未设height:100vh导致1fr失效，因1fr依赖父容器明确高度；需同时设置html和body为height:100vh或min-height:100vh，并清除默认margin/padding。
body 高度没设 100vh，1fr 就算不出来
Grid 布局里写 grid-template-rows: auto 1fr auto，但底部还是空着——大概率是 body 自身没占满视口。浏览器不会自动把 1fr 当成“剩下所有高度”，它只认父容器的**已知高度**。如果 body 没显式设高，它就按内容撑开，1fr 分到的可能是 0 或极小值。
-
body必须加height: 100vh（不是min-height，也不是height: 100%） - 同时确保
html也设height: 100vh或至少height: 100%，否则body的 100% 无处可依 - 移除
body上可能存在的min-height: auto这类无效声明，它会覆盖height
用 100vh 而不是 height: 100% 的真实原因
height: 100% 是相对父元素计算的，而 html 的父元素是初始包含块（initial containing block），它的高度默认由内容决定，不是视口。所以 html { height: 100% } 在没内容时几乎等于 0；body { height: 100% } 就更没意义了。
-
100vh是绝对单位，直接映射当前可视区域高度，不依赖继承链 - 移动端尤其要慎用
height: 100%：Safari 对初始包含块高度的解析不稳定，100vh更可靠 - 如果页面需要滚动，且希望 footer 始终在内容底部（而非视口底部），那就该用
min-height: 100vh+ Flexbox，而不是强制height: 100vh
footer 被挤出视口？检查有没有隐藏的 margin/padding
即使设了 100vh 和 Grid，footer 还是掉到底部看不见，往往是因为某个祖先元素（比如 body 或容器 div）有未重置的默认 margin 或 padding，导致整体高度超出了 100vh。
- 确认
html, body { margin: 0; padding: 0; }已生效（* { margin: 0; padding: 0; }不够，因为html和body的 margin 是用户代理样式，优先级更高） - 用浏览器开发者工具检查
body的 computed height 和实际占用高度是否一致，差值往往来自未察觉的 padding 或 border - 避免在 Grid 容器里给
footer设固定height后又加margin-top: -Xpx——这是典型“用负边距掩盖布局失败”的信号
内容少时 footer 贴底，内容多时正常滚动，怎么选
两种场景不能混用同一套规则：height: 100vh 强制填满，适合登录页、介绍页这类单屏设计；而内容型页面（如文章页）需要自然滚动，footer 应随内容下移，此时必须放弃 height，改用弹性方案。
立即学习“前端免费学习笔记（深入）”；
- 推荐 Flex 方案：
body { display: flex; flex-direction: column; min-height: 100vh; }，再给主内容区设flex: 1 - 避免用
calc(100vh - Xpx)算 header/footer 高度：header 高度可能因字体、行高变化，硬编码易断裂 - 如果用了 sticky header，
min-height: calc(100vh - headerHeight)不可靠，应让 body flex 布局自己分配空间
实际效果取决于你是否愿意放弃“手动调像素”的思路——真正稳定的全高布局，从来不是靠塞满高度，而是靠定义好容器关系和伸缩逻辑。
