最稳的粘性页脚实现是min-height: 100vh配合main{flex-grow: 1}，父容器需display: flex且flex-direction: column；height: 100vh会锁死高度导致footer被截断，而min-height: 100vh允许内容撑开；需确保html/body无margin、body设min-height: 100vh，footer保持flex: 0 1 auto，复杂场景可叠加footer{margin-top: auto}作后备。
直接用 min-height: 100vh 配合 flex-grow: 1 是目前最稳的粘性页脚实现方式，前提是父容器必须是 display: flex 且方向为 column —— 其他写法要么遮内容，要么在内容变短时失效。
为什么 min-height: 100vh 不能写成 height: 100vh
height: 100vh 会把容器“锁死”在视口高度，一旦内容超出，main 区域无法撑开，footer 就会被截断或压到视口外；而 min-height: 100vh 表示“至少一屏高”，内容多时自动延展，这才是粘性页脚的核心前提。
- 必须作用于
body（或包裹header/main/footer的直接父容器） - 如果用了 CSS Reset（比如
normalize.css），要额外确认body { margin: 0 }已生效，否则顶部/底部白边会破坏高度链 - 旧版 Safari（如 10.1）对
height: 100%继承敏感，min-height: 100vh更容错
flex-grow: 1 必须加在 main 上，不是 footer
给 footer 加 flex-grow: 1 会导致它疯狂拉伸、盖住内容甚至溢出视口——因为 flex-grow 是分配剩余空间，不是“吸附到底部”。真正该吃掉剩余空间的是主内容区。
-
main { flex-grow: 1 }或简写为main { flex: 1 }，效果一致 -
footer应保持默认flex: 0 1 auto（即不伸缩、可收缩、按内容定高） - 若结构中有多个中间区块（比如
aside+main），需明确所有非 footer 子项的flex值，避免高度冲突
比 flex-grow 更鲁棒的后备：用 margin-top: auto
当页面结构复杂（比如嵌套了动态高度的卡片或第三方组件），flex-grow: 1 可能因高度计算异常而失效；此时直接给 footer 加 margin-top: auto 能强制它贴住父容器底部，且完全不干扰内容滚动行为。
- 可以和
flex-grow: 1共存：main { flex: 1 }+footer { margin-top: auto }，双保险 -
margin-top: auto在 flex column 容器中会吸收所有剩余空间，比依赖“谁来占满”更直接 - 注意：它只对 flex 容器的直接子元素生效，不能跨层使用
真正容易被忽略的不是某行代码怎么写，而是整个高度链是否完整——从 html 到 body 再到 main，每一级都得放弃默认 margin、设好最小高度、启用 flex 布局。漏掉任意一环，flex-grow 就只是个摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
