粘性页脚应使用 flexbox 或 grid 布局实现：flexbox 方案需 html/body 设 min-height: 100vh、body 设 display: flex + flex-direction: column、main 设 flex: 1；grid 方案需 body 设 display: grid + grid-template-rows: auto 1fr auto，且 header/main/footer 必须为 body 直接子元素。
用 CSS 让页脚始终贴在页面底部（即「粘性页脚」），关键不是靠 position: fixed 或 position: absolute，而是让页脚自然参与文档流，并由布局容器主动“撑开”剩余空间。现代方案只有两个可靠选择：Flexbox 和 Grid，其他方法要么依赖固定高度、要么易出错、要么兼容性差。
body 用 flex 布局时，main 必须设 flex: 1
这是最直观的解法，但容易漏掉一个关键点：如果 main 没有明确伸缩指令，它就不会占满剩余空间，页脚就会上浮。
-
html和body都要设min-height: 100vh，且body的margin: 0必须清除 -
body设display: flex+flex-direction: column，否则flex: 1不生效 -
main（或内容包裹层）必须是body的直接子元素，且设flex: 1；不能用flex-grow: 1单独写，因为缺少flex-shrink和flex-basis默认值可能引发意外收缩 - 页脚（
footer）不能有任何position声明，否则脱离文档流，flex就无法约束它
用 grid 布局时，grid-template-rows 必须显式声明三行
很多人只写 1fr auto，结果页脚还是飘在中间——那是因为没把 header 算进网格行里。Grid 要求结构和模板严格对齐。
- 若页面含
header、main、footer三个直系子元素，grid-template-rows必须为auto 1fr auto，不能省略 header 行 - 如果页脚高度固定（如
60px），可改用auto 1fr 60px，比auto更精确，避免因字体渲染导致的高度微变 -
body必须设min-height: 100vh，且html上最好加height: 100%，防止某些旧版 Safari 对100vh解析异常 - 所有 header/main/footer 必须是
body的**直接子元素**；嵌套在.container里会破坏行高计算，1fr 就分配不到预期空间
为什么 position: absolute + bottom: 0 总是出问题？
这不是写法错，而是语义错——它让页脚脱离文档流，不再响应内容高度变化。常见错误现象包括：
- 短页面时页脚确实到底了，但长页面滚动时，页脚会盖住正文（因为它始终相对于视口定位）
- 如果父容器没设
position: relative，bottom: 0会向上逐级查找定位上下文，最终可能相对html定位，而html高度又不一定是视口高 - 当页脚内文字换行或字体加载延迟，
height动态变化，absolute元素不会触发父容器重排，造成底部留白或重叠 - 配合
transform: translateY()临时补救，只是掩盖问题，不是解决布局逻辑
真正难的不是写哪几行 CSS，而是判断当前 HTML 结构是否满足 Flexbox/Grid 的前提条件：直系子元素、无干扰定位、高度约束链完整。一旦结构松动，再精巧的 CSS 也会失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
