bottom: 0不生效的根本原因是父容器未撑满视口高度，导致定位上下文缺失；需确保html、body及直接父容器均设min-height: 100vh且有可靠高度来源。
bottom: 0 不生效，根本原因不是写错了，而是它没地方可“底”
当你给 footer 设置 bottom: 0 却发现它浮在半空，不是 CSS 失灵了，而是它的定位上下文（即父容器）压根没撑到视口底部。bottom: 0 是相对于最近的「有定位的祖先元素」计算的，如果那个祖先高度只有 200px，那 bottom: 0 就是贴在这 200px 的底部，和屏幕底边毫无关系。
为什么父容器高度经常“不够”？
浏览器默认行为：html 和 body 高度由内容决定，不是自动占满视口。哪怕你写了 min-height: 100vh，若没同时控制好继承链，子元素的 100% 或 100vh 依然会失效。
-
html和body必须显式设height: 100%或min-height: 100vh（推荐后者，更直观） - 如果用
position: absolute定位footer，其父容器（比如.container）必须设position: relative且min-height: 100vh - 父容器若用了
flex或grid，也要确认它本身的高度来源是否可靠——不能依赖子元素反向撑高
中间内容区（main / .content）高度不撑开的典型表现
即使父容器高度正确，main 区域自身若存在以下情况，也会导致视觉上 footer “悬空”：
- 内部元素浮动未清除（
float: left后没clear: both或overflow: hidden），造成父容器塌陷 - 用了
display: inline-block或vertical-align引发基线对齐间隙，间接影响高度计算 - 设置了
height: 0、max-height: 0或visibility: hidden等隐藏手段，但 DOM 仍占位 - 内容区被
transform: translateY()或margin-top错位，实际渲染位置和文档流脱节
快速验证：用 DevTools 检查三处高度
打开 Chrome 开发者工具，依次检查：
- 选中
html元素 → 查看 computed 标签页 → 确认height是具体数值（如100%或768px），而非auto - 选中
body或直接包裹header/main/footer的容器 → 看height和min-height是否 ≥ 视口高度 - 选中
main元素 → 展开 box model，看height是不是远小于预期；再看offsetHeight是否为 0（说明塌陷）
真正卡住人的，往往不是 footer 本身怎么写，而是它上面两层——body 和 main——谁悄悄把高度交了白卷。盯住这三者的实际渲染高度，比反复调 bottom 值有效得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
