页脚贴底需确保高度链完整：html设min-height:100vh或height:100%，body设min-height:100vh、margin:0，并配合Flex或Grid布局；推荐Grid方案——body设display:grid;grid-template-rows:auto 1fr auto，子元素按header→main→footer顺序排列。
内容少时页脚飘在半空，不是贴底、不是固定定位、也不遮内容——min-height 是解法核心，但光设 min-height: 100vh 不够，必须配合父容器高度链和布局模式。
body 必须设 min-height: 100vh，不能只靠 html
很多人只给 html 设 height: 100%，结果页脚还是塌陷。因为 body 默认有 margin，且未参与高度继承。实际生效链是：html → body → 布局容器。所以：
-
html要设height: 100%（兼容老浏览器）或min-height: 100vh -
body必须显式设min-height: 100vh，同时margin: 0 - 如果用 Flex 布局，
body还得加display: flex; flex-direction: column - Grid 布局则直接在
body上设display: grid; grid-template-rows: 1fr auto
Flex 布局下 main 设 flex: 1 比 min-height 更稳
当内容极少时，仅靠 main { min-height: 100vh } 容易被父级约束截断；而 flex: 1 是弹性分配剩余空间，逻辑更可靠：
-
body必须是display: flex; flex-direction: column -
main设flex: 1，它会自动撑满 header 和 footer 之间的所有空隙 -
header和footer不需要固定高度，字号响应式变化时仍有效 - IE11 对
margin-top: auto支持差，但flex: 1在 IE11 中可用（需加-ms-flex: 1）
Grid 布局用 grid-template-rows: auto 1fr auto 最简
这是目前最干净、语义最清晰的方案，无需计算 padding 或负 margin：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
.layout（或直接body）设display: grid; grid-template-rows: auto 1fr auto -
1fr表示中间区域吃掉所有剩余空间，天然防止页脚上浮 - 三个子元素必须按顺序：header → main → footer，否则行轨道错位
- 若
footer高度不固定，1fr依然生效；但避免给footer设height，改用min-height或内边距控制视觉高度
绝对定位 + padding-bottom 方案只适合固定高度页脚
这个老方案现在基本不推荐，除非你明确知道页脚高度永远不变：
-
main必须设padding-bottom: 60px（等于footer的height） -
footer设position: absolute; bottom: 0; height: 60px - 一旦页脚用
em、rem或媒体查询改变高度，padding-bottom就不同步，内容会被遮挡 - 该方案要求
main的父容器是position: relative，否则absolute会相对于 viewport 定位
真正容易被忽略的是：所有方案都依赖「结构顺序」和「高度链完整性」。header/main/footer 不能嵌套错层，html 和 body 的 margin/padding 必须清零，且任意一级容器加了 overflow: hidden 或 transform 都可能打断高度继承。动手前先检查 computed height 是否真传到了 layout 容器。
