背景：一个看似很"典型"的样式问题
线上遇到一个样式问题：
页面底部的 footer 无法被撑到预期高度，看起来像是高度计算出了问题。
从表象看，这是一个非常典型的 CSS 问题：
- 高度没生效
- 布局被压缩
- 父子元素高度关系异常
于是我很自然地开始从「局部样式」入手排查。
第一阶段：在"正确但无效"的方向里打转
我的第一反应（相信很多前端都会）是：
- 是不是
flex没用对？ - 是不是
height: 100%没生效？ - 是不是父容器没有明确高度？
- 要不要改成
min-height？ - 会不会是 BFC / overflow 的问题？
于是我开始：
- 反复调整 footer 和父容器的 CSS
- 检查 DOM 结构
- 对比正常和异常页面的样式差异
甚至还把问题丢给了 AI，希望从 CSS 角度找到一个"精确解法"。
👉 但问题是：这些分析逻辑本身都没错，却始终解决不了问题。
第二阶段：意识到自己可能"钻牛角尖了"
真正让我停下来的是一个感觉：
我已经在同一小块区域里反复验证假设，但没有任何实质进展。
这时候我意识到一个危险信号：
- ❌ 我默认「问题一定在 footer 或它的直接父级」
- ❌ 我默认这是一个"局部 CSS 失效问题"
- ❌ 我不断在验证同一类假设
于是我强迫自己换了一个思路：
先不管 footer，看看整个页面的高度是怎么被算出来的。
第三阶段：把视野拉大，问题反而变简单了
当我从页面根节点开始往下看布局结构时，很快发现了一个异常点：
👉 table 容器被设置了 height: 50% 的固定比例高度
这件事的影响是：
- table 本身高度被强行限制
- 页面整体高度无法自然撑开
- footer 即使写得再"正确"，也只能在剩余空间里挤着
而 footer "看起来没被撑高"，其实只是被上游布局截断了。
真正的解决方案（非常简单）
css
/* 原本 */
.table-wrapper {
height: 50%;
}
/* 修改后 */
.table-wrapper {
height: auto; /* 或直接移除 */
}复盘：这个问题真正难的地方是什么？
这个问题并不难，但它有几个很容易让人误判的点：
1️⃣ 表象非常像"footer 自身的问题"
下意识认为：
- footer 写错了
- 高度没生效
- flex 布局有 bug
2️⃣ 局部样式逻辑是"自洽的"
CSS 写的没问题，AI 给的建议也没错，但：
在错误的前提下，所有正确的推导都是无效的。
3️⃣ 真正的问题在"更上游"
布局问题里，经常是：
- 子元素异常
- 但根因在祖先节点