最可靠的页脚固定方案是flexbox：外层容器设min-height: 100vh和display: flex、flex-direction: column，main加flex: 1，footer保持自然高度，并重置body { margin: 0 }。
页脚卡在底部但内容少时被顶上去
这是 position: fixed 最常见的误用场景：页脚确实“固定”了，但正文内容一短，它就盖住内容末尾，或者悬在半空。根本原因是 fixed 脱离文档流，浏览器不再为它预留空间，也不感知内容高度变化。
真正要的是「内容不够高时贴底，内容足够高时随内容自然撑开」——这得靠布局逻辑，不是靠定位强行钉住。
- 别用
position: fixed或position: absolute直接套页脚容器 - 父容器（比如
body或一个包裹main+footer的div）必须有明确高度约束，通常是min-height: 100vh - 页脚本身不设高度，靠
margin-top: auto或flex推到底部，而不是靠bottom: 0
calc(100vh - 头部高度 - 页脚高度) 不生效
calc() 看似直接，但实际中经常失效，不是函数写错，而是参与计算的值没被浏览器正确解析：比如头部用了 rem、% 或 auto 高度，calc 就无法运算；或者父元素没设置 height，导致 100vh 在子级里被忽略。
更隐蔽的问题是滚动条：某些浏览器下 100vh 包含滚动条宽度，而页脚高度若用 px 写死，差几个像素就会导致底部留白或溢出。
- 只对已知固定像素值的元素用
calc，例如header高64px、footer高80px，才写height: calc(100vh - 64px - 80px) - 避免混用单位：
calc(100vh - 4rem - 80px)在部分旧版 Safari 中会直接失效 - 如果头部/页脚用
flex或grid布局，优先放弃calc，改用弹性容器分配空间
Flexbox 实现真正可靠的 sticky footer
现代最稳的方案是用 display: flex + flex-direction: column，把页面当垂直堆叠容器，让主体区域自动填满剩余空间，页脚自然被“挤”到底部。
关键不在计算，而在容器高度声明和子项行为控制。
- 外层容器（如
html或一个全高 wrapper）设min-height: 100vh和display: flex、flex-direction: column -
main或内容区加flex: 1（等价于flex: 1 1 auto），它会吸收所有剩余空间 -
footer不设flex，保持固有高度，也不设margin-top: auto—— 那是老式写法，容易和flex: 1冲突 - 注意：若
body有默认margin，会导致整体超100vh，必须重置body { margin: 0 }
Grid 布局一行代码搞定但兼容性要注意
display: grid 可以用 grid-template-rows 显式定义头、主体、尾三行，主体用 1fr 自动拉伸，比 Flex 更语义清晰。但它对 IE 完全不支持，且 Safari 15.4 之前对 minmax(0, 1fr) 处理异常。
如果你项目还需兼容旧版 Safari 或需要服务端渲染（SSR）环境样式稳定，grid 方案要多加一层防御。
- 推荐写法：
grid-template-rows: auto 1fr auto，其中1fr行对应内容区 - 必须给容器设
min-height: 100vh，否则1fr没参考基准 - 避免用
minmax(min-content, 1fr)：Chrome 新版本支持，但部分移动端 WebView 仍会忽略 - 检查
footer是否设置了align-self: end—— 这反而会破坏默认对齐，删掉即可
事情说清了就结束。最常被忽略的其实是 body 的 margin 和 box-sizing，这两个看似无关的设置，往往让整个 calc 或 flex 布局差那么一截高度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
