页脚“飘在中间”的根本原因是body未撑满视口高度且内容区未主动占位；正确做法是html和body清空margin，body设min-height: 100vh、display: flex、flex-direction: column，main设flex: 1吸满剩余空间，footer保持position: static。
body设flex column且min-height: 100vh
页脚“飘在中间”的根本原因不是footer没定位，而是
没撑开高度。直接给body设min-height: 100vh并启用弹性布局，才能让内容区有空间可占——height: 100vh不行，长页面会截断；min-height才是关键。必须同时清空html和body的默认margin，否则顶部/底部留白会干扰计算：
html, body {
margin: 0;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}main用flex: 1吃掉剩余空间
main不是靠高度或padding“顶”页脚，而是靠flex: 1主动占满body里除header/footer外的所有剩余空间。这个行为是flex容器自动分配的结果，不是“推”，是“吸”。
- 如果没用
<main></main>标签，用.content也行，但必须是body的直接子元素 -
flex: 1等价于flex: 1 1 0%，三个值缺一不可；只写flex: 1最安全 - 别给
main设height或min-height，会和flex: 1冲突
footer保持position: static
footer不需要position: absolute、fixed或relative——它就该是文档流里的普通块元素。一旦加了这些定位，反而容易遮挡内容、脱离flex上下文、导致响应失效。
立即学习“前端免费学习笔记（深入）”；
常见错误：
- 给
footer设margin-top: auto：可行，但仅适用于main不设flex时；和flex: 1混用会导致布局错乱 - 给
footer设固定height：没必要，内容自适应高度更健壮 - 在
footer里用position: fixed实现“永远在底部”：那是悬浮导航栏的需求，和sticky footer是两回事
有header时怎么处理？
header存在时，main仍用flex: 1，但body的min-height不用改——flex会自动忽略header已占高度，把剩余空间全给main。
唯一要小心的是：header若用了position: sticky，必须确保它有明确高度（比如height: 60px），否则flex: 1无法准确计算剩余空间。
复杂点在于多层嵌套或动态高度的header——这时calc(100vh - headerHeight)反而不可靠，因为JS可能改变header高度，而CSS calc不会重算。真遇到这种场景，优先保证header高度稳定，而不是硬套calc。
