如何通过CSS Flexbox技术实现自适应粘性页脚并设置flex-grow属性以填充剩余空间？

本文共计1010个文字，预计阅读时间需要5分钟。

直接给 + flex-grow: 1 + 是错误的起因——它必须配合正确的容器高度链和方向控制，否则在多数真实页面上根本不会生效。

为什么 flex-grow: 1 单独写在 footer 上完全没用

常见错误现象：页脚被拉得又高又宽，甚至盖住内容；或者页脚干脆不动，依然飘在半空。

原因很直接：flex-grow 的作用是“抢占剩余空间”，不是“沉到底部”。给 footer 加 flex-grow: 1，等于命令它把自身撑满所有空余高度，这和粘性页脚的目标背道而驰。

真正该接收这个属性的是主内容区（比如 main 或 .content），它的任务是“吃掉父容器里 header 之后、footer 之前的全部空白”，从而把 footer “顶”下去。