grid-template-rows: 1fr auto 是最简可靠的方案，因它使主体自动吸收剩余高度、页脚按内容自适应且始终贴底，避免了 min-height: 100vh 或 JS 计算的缺陷。
为什么 grid-template-rows: 1fr auto 是最简可靠的方案
Grid 实现粘性页脚的核心在于让主体区域“撑满剩余空间”，而不是靠 min-height: 100vh 或 JS 计算。用 grid-template-rows: 1fr auto 可以让主体（main）自动吸收所有可用高度，页脚（footer）只占自身内容高度，且始终贴底。
常见错误是写成 grid-template-rows: auto 1fr auto（把 header/main/footer 全列出来），这样反而破坏了“主体吸底”逻辑；或者漏掉 html, body { height: 100% }，导致根容器高度不足，1fr 失效。
实操建议：
- 必须给
html和body设置height: 100%，否则 Grid 容器无参考高度 - 布局容器（如
.layout）设为display: grid，并显式定义grid-template-rows: 1fr auto - 确保
main元素在 DOM 中位于header之后、footer之前，否则 Grid 行顺序错乱 - 若需固定 header，可改用
grid-template-rows: auto 1fr auto，但此时main必须设overflow-y: auto防止内容溢出
当页脚高度不固定时，min-height 和 max-content 怎么选
页脚内容动态（比如版权信息 + 联系方式 + 社媒图标），高度可能变化。此时不能写死 height: 60px，但也不能任由它把页面拉长——需要平衡“不遮挡内容”和“不悬空”。
min-height 适合设定底线（如至少留 48px 高度），而 max-content 在 Grid 中对 grid-row 项无效，真正起作用的是父容器的 grid-template-rows 中的 auto ——它本身就按内容伸缩。
实操建议：
- 页脚本身不设
height，只设min-height: 48px和padding，让内容自然撑开 - 避免在
footer上设flex或display: grid后又忘记align-items，导致内部元素垂直偏移影响整体高度判断 - 如果页脚内有浮动或绝对定位元素，要确保它们不脱离文档流后造成高度塌陷（加
clear: both或用overflow: hidden包裹）
IE11 不支持 Grid？用 display: -ms-grid 行不通的原因
IE11 的旧版 Grid（-ms-grid）语法和现代 Grid 完全不兼容：grid-template-rows 对应的是 -ms-grid-rows，但 1fr 在 IE 中不被识别，只能写成 1fr 的近似值（如 1fr → 1fr 会被忽略，得用 1fr 替代为 1fr？不行，IE 根本不认 fr 单位）。
所以强行加前缀不仅无效，还会因语法错误导致整个 Grid 声明失效，回退到普通流布局，页脚直接堆在内容下方。
实操建议：
- 不要尝试用
-ms-grid实现 sticky footer，兼容 IE11 应改用 Flexbox 方案（flex-direction: column; min-height: 100vh; justify-content: space-between） - 若项目已弃用 IE11，可在 CSS 中直接写现代 Grid，无需前缀；检查构建工具（如 Autoprefixer）是否误注入了
-ms-规则 - 用
@supports (display: grid)包裹 Grid 布局，明确区分支持/不支持环境
移动端键盘弹出时，100vh 变小导致页脚上浮怎么办
iOS Safari 和部分安卓浏览器在软键盘弹出时会把 vh 单位重新计算为“可视窗口高度”，导致 100vh 缩水，Grid 容器变矮，1fr 分配空间变少，页脚就被顶上来了。
这不是 Grid 本身的 bug，而是视口单位在输入场景下的固有行为。靠 JS 监听 resize 并重设高度容易抖动，也不可靠。
实操建议：
- 避免在布局根容器上依赖
100vh；改用min-height: 100dvh（dvh是动态视口单位，Safari 16.4+、Chrome 105+ 支持） - 若需兼容老版本，可对含表单的页面单独处理：给
body加 class（如has-form-focus），用 JS 暂时移除min-height或切换为 Flex 布局 - 页脚本身加
position: fixed是下策——会遮挡输入框，且与 Grid 粘性逻辑冲突，仅限极简落地页临时使用
Grid 的 sticky footer 看似简单，真正难的是边界情况：内容极少时页脚不能悬空、内容极多时不能遮挡、键盘弹出时不跳变、老浏览器不崩溃。每个“自动”背后都藏着对高度来源、单位行为、渲染时机的精确控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
