粘连布局（Sticky Footer）必须通过Flexbox或Grid实现高度分配，而非position: sticky/fixed；因sticky对footer无效（无滚动进入过程）、fixed会脱离文档流，Flexbox需body设height:100%和flex-column，Grid推荐minmax(0,1fr)防撑爆。
粘连布局（Sticky Footer）不能靠 position: sticky 或 position: fixed 实现，否则 footer 会脱离文档流、遮挡内容或破坏滚动逻辑。真正可靠的是 Flexbox 或 Grid 布局约束高度分配。
为什么 position: sticky 对 footer 完全无效
它只在元素随父容器滚动“进出视口”时触发吸附，而 footer 天然位于文档末尾，没有滚动中“进入”的过程；浏览器直接降级为 static。你加了 bottom: 0 也没用——sticky 不支持 bottom 在非滚动上下文里生效。
- 常见错误现象：footer 悬在页面中间、刷新后跳动、Safari 下完全不响应
- 即使强行套在有
max-height的父容器里，也会因 footer 自身无高度基准而失效 - 不要试图给
body加overflow: scroll来“制造滚动上下文”——这会引入双滚动条
Flexbox 实现：最简且兼容 IE11+
核心是让 body 成为 column 方向的 flex 容器，.content 占满剩余空间，把 footer “顶”到底部。
-
html和body必须设height: 100%，否则flex: 1无高度可分 -
body { display: flex; flex-direction: column; margin: 0; }—— 不要漏掉margin: 0，否则默认边距撑开布局 -
.content { flex: 1; }等价于flex: 1 1 auto，不能写成flex: 1 0 auto（后者会禁止收缩，短内容下 footer 上浮） -
footer保持普通流内位置，不加margin-top: auto也行；但加了可在旧版 Safari 中作为后备（仅限 iOS 12.5.7 以下）
Grid 实现：适合已有 Grid 架构的项目
用 grid-template-rows 显式划分三行，中间用 1fr 吸收剩余空间，比 Flexbox 更易扩展多区域。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
body { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; }- 推荐用
minmax(0, 1fr)替代纯1fr，防止长内容撑爆 footer 高度（尤其含textarea或动态插入区块时） - 不要给
footer设grid-row: 3—— 它应由模板隐式放置；显式定位在 IE Grid 中极易错位 - 若需支持 IE，避免嵌套 Grid 容器使用
1fr，IE 对fr单位在子网格中的解析存在已知 bug
别碰负 margin / padding-bottom 这类老方案
它们依赖固定 footer 高度、需额外 DOM 元素（如 .push）、盒模型计算脆弱，现代项目里纯属技术债。
-
.main { min-height: calc(100vh - 50px); }看似简单，但 viewport 变化（比如 iOS 键盘弹出）会导致高度错乱 -
margin-top: -50px+padding-bottom: 50px要求所有设备上 footer 高度严格一致，响应式断点一改就露馅 - 这些方法无法处理动态内容（比如 JS 插入区块、图片懒加载完成后的重排），容易出现 footer 覆盖文字
真正难的不是写对那几行 CSS，而是理解：粘连布局的本质是「高度分配」，不是「定位覆盖」。一旦开始想“怎么把 footer 拉下来”，就已经走偏了。
