firefox 中 td 的 height: 100% 不生效，因其原生表格元素无视父级高度声明，仅依赖内容撑开；需确保 html→body→直接父容器高度链完整、table 有明确宽度、且无 min-height 等干扰项。
Firefox 中 height: 100% 在 td 上完全不生效的真相
不是你写错了，是 Firefox 根本不按你写的 height 解析 td。原生表格元素（table、tr、td）在 Firefox 中对百分比高度的处理逻辑极简：它只看内容撑开结果，无视父级 height 声明，也不参与包含块高度继承链。哪怕 html 和 body 都设了 height: 100%，只要中间某一级容器没被识别为“有效包含块”，td { height: 100% } 就直接被忽略。
为什么 table-layout: fixed 不能单独解决问题
table-layout: fixed 只管列宽推算，和高度无关。它只是让列宽稳定下来，为后续高度控制提供前提——但光靠它，td 依然不会响应 height: 100%。必须同时满足三个条件：
-
table元素自身要有明确宽度，比如width: 100%或具体像素值，否则fixed模式连尺寸基准都建不起来 - 高度链路必须完整：从
html→body→ 直接父容器（如.table-wrapper）都得显式设height: 100%；缺任何一环，td就失去可依附的包含块 - 删掉所有干扰项：
min-height、max-height、vertical-align: top（某些 Firefox 版本会因此重置高度计算逻辑）
更稳的替代方案：绕过原生 table 的 height 限制
硬推 height 在 Firefox 表格里极易翻车，尤其嵌套深或用了 UI 框架时。推荐两条路径：
- 语义保留 + 样式替换：把
table外层换成display: table，td换成display: table-cell，这样外层容器就能用min-height（真正生效），内部仍保持表格对齐特性 - 直接升级布局模型：用
display: grid替代整个表格结构，grid-template-rows: 1fr控制行高，height百分比失效问题自然消失；若需兼容老浏览器，display: flex+flex-direction: column也比原生 table 更可控
调试时最容易漏掉的断点位置
很多人卡在“明明写了 html, body { height: 100% }”，却没发现真正断链的是 table 的直接父容器——比如某个 .panel 被设了 position: absolute 或 display: inline-block，它就不再是 table 的包含块，导致 height: 100% 回退到 html 计算。务必用开发者工具逐层点开 Computed 面板，检查每一级的 height 是 auto 还是具体像素值，而不是只盯着 table 自身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
