最可靠方式是用display: flex或display: grid实现头部页脚固定布局，而非position: fixed；前者让header/main/footer保持文档流内，通过min-height: 100vh + flex: 1或grid-template-rows: auto 1fr auto使main自适应剩余空间，确保页脚在短页面沉底、长页面随内容自然置底，避免遮挡、跳变与兼容性问题。
用 display: flex 或 display: grid 实现头部与页脚固定布局，比 position: fixed 更可靠——后者容易遮挡内容、滚动错位、在 iOS 上触发视口高度跳变，且无法让页脚随内容自然沉底。
flex-direction: column + flex: 1 是最稳的主方案
把 body 设为 flex 容器，main 占满剩余空间，header 和 footer 自然贴边：
-
html和body必须设min-height: 100vh（不是height: 100vh），否则短内容页会被拉伸溢出 -
main必须写flex: 1（等价于flex-grow: 1），否则footer会卡在main后面，不“沉底” -
header和footer不要加position，它们的高度由内容决定；加flex-shrink: 0防止被压缩 - IE11 对
flex: 1支持不稳定，如需兼容，可改用margin-top: auto加在footer上
grid-template-rows: auto 1fr auto 更语义化
一行定义三行轨道，代码更少，结构更干净：
-
body必须显式设min-height: 100vh，否则grid不会按视口高度计算剩余空间 -
grid-template-rows: auto 1fr auto中的1fr表示中间区域占满所有剩余空间 -
footer默认不铺满整行，需加justify-self: stretch - iOS Safari 14.5+ 已无
vh跳变问题，现代项目可放心用
为什么别用 position: fixed 做页脚沉底
position: fixed 看似简单，但运行时隐患多：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 页脚脱离文档流，会覆盖
main内容，必须手动给main加padding-bottom补偿 - 移动端软键盘弹出时，
vh重算，页脚可能突然上移或消失 - 滚动时页脚始终可见，无法实现“内容少时沉底、内容多时随内容到底”的真实需求
-
z-index控制稍有疏漏，就容易被其他组件遮挡（比如弹窗、toast）
移动端 sticky 头部可以，但 footer 不适用
position: sticky 只对 top 或 bottom 单方向生效，且依赖父容器滚动：
-
header设position: sticky; top: 0是可行的，它会在滚动到顶部时“粘住” -
footer设position: sticky; bottom: 0几乎无效：它只在滚动到容器底部时才触发，而页面容器本身通常没那么高 - 想让页脚“始终在视口底”，还是得靠 flex/grid 的整体布局控制，不是靠单个元素定位
真正难的是处理动态内容高度变化（比如折叠面板展开、异步加载更多）和移动端软键盘导致的视口重算——这时候 min-height: 100vh 可能失效，需要监听 resize 或用 env(safe-area-inset-bottom) 补齐底部留白。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
