footer卡在中间是因默认文档流无高度基准；用flex布局设body为column容器、main flex:1可稳贴底；grid更简洁但IE不支持。
为什么 footer 总是卡在中间，而不是老老实实蹲底？
因为默认文档流里，footer 只是普通块级元素，它只管自己内容高度，不管页面剩多少空白。如果上面内容短，footer 就跟着内容停在半路——这不是 bug，是正常行为。真正要它“贴底”，得让整个页面有明确的“容器高度基准”，否则 CSS 无从判断“底”在哪。
用 flex 布局把 body 变成弹性容器最稳
这是目前兼容性好（Chrome 29+、Firefox 28+、Safari 6.1+、Edge 全支持）、逻辑清晰、不易踩坑的做法。核心是让 body 成为 flex 容器，并设置主轴方向为列、子项沿主轴拉伸填充。
-
html, body { height: 100%; margin: 0; }—— 必须设html和body高度为 100%，否则 flex 的min-height: 100%没参照 -
body { display: flex; flex-direction: column; min-height: 100vh; }——min-height: 100vh确保至少占满视口，flex-direction: column让子元素垂直排列 -
main { flex: 1 0 auto; }—— 给主要内容区域设 flexGrow=1，它会自动吃掉剩余空间，把footer“顶”到底部 -
footer { flex-shrink: 0; }—— 防止内容多时footer被压缩变形
不用 flex？grid 更简洁但兼容性稍弱
如果你只支持现代浏览器（Chrome 57+、Firefox 52+、Safari 10.1+），grid 是更直接的解法：把 body 当成网格容器，明确定义三行（header / main / footer），其中中间行设为 1fr 占满剩余空间。
body { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; margin: 0; }- 不需要额外包裹容器，也不用给
main设 flex 属性，语义和结构更干净 - 注意：IE 完全不支持，旧版 Safari（-webkit- 前缀且行为不稳定
别碰 position: fixed 或 absolute 模拟“置底”
这类写法看似简单，实际埋雷最多：固定定位会让 footer 脱离文档流，导致页面内容被遮挡、滚动时错位、打印样式异常，而且无法响应内容高度变化（比如 JS 动态加载内容后，footer 还卡在原位置）。
立即学习“前端免费学习笔记（深入）”；
-
position: fixed; bottom: 0;—— 页面一长就盖住内容末尾，用户根本看不到最后几行文字 -
position: absolute; bottom: 0;—— 要求父容器必须是relative且有明确高度，否则还是无效 - 所有靠“算高度 + margin/padding 抵消”的 JS 方案，在响应式或动态内容场景下极易失效
真正可靠的 footer 置底，本质是控制布局容器的高度分配逻辑，而不是给 footer 单独加样式。最容易被忽略的一点：忘了设 html { height: 100% }，结果 body 的 100vh 或 flex 根本没生效——这种问题不会报错，只会默默不工作。
