这是最常见失效原因：height: 100% 是相对父元素计算的，如果父元素没有显式设置高度（比如 或 仍为 auto），百分比就无从算起。

实操建议：

• 确保 和 都设为 height: 100% 或 min-height: 100vh
• 避免只给某个中间容器设 height: 100%，而忽略其所有上级
• 用 min-height 替代 height 更安全，防止内容溢出时被截断

想让元素占满整个视口？优先用 vh 单位

100vh 表示视口高度的 100%，不依赖父级高度声明，兼容性好（IE9+），也更直观。

注意点：

• 移动端 Safari 中，vh 可能因地址栏显示/隐藏而动态变化，导致布局跳动
• 若需稳定占满可视区且内容可能超出，推荐 min-height: 100vh
• 不要混用 height: 100vh 和 padding-bottom 等会撑高实际尺寸的属性，否则可能滚动条意外出现

Flex 布局中子元素高度不随父容器拉伸？检查 align-items 和 flex 值

当父容器是 display: flex 且设了高度，子元素默认不会自动填满高度，除非显式设置。

关键控制项：

• align-items: stretch（默认值）能让子元素在交叉轴（对 column 是水平轴，对 row 是垂直轴）拉伸——但前提是子元素没设固定 height 或 min-height
• 给子元素加 flex: 1（等价于 flex: 1 1 auto）可强制其填充剩余空间
• 若父容器是 flex-direction: column，且希望某子项占满剩余高度，必须确保其他兄弟元素不占用过多空间，或用 flex-shrink: 0 锁定固定高度项

表格单元格（ / ）高度调不上去？别只盯 height

表格单元格高度受 table-layout 模式和内容影响极大。默认 table-layout: auto 下，height 只是“最小高度”，实际由内容、行高、边框等共同决定。

可靠做法：

• 给 设 table-layout: fixed，再给

  设 height，此时高度才真正生效 配合 vertical-align: top/middle/bottom 控制内容在单元格内的对齐 避免在

  内嵌套块级元素并设 margin，这会破坏表格高度计算逻辑 table { table-layout: fixed; width: 100%; } td { height: 60px; vertical-align: middle; } 高度问题本质是盒模型 + 布局上下文的综合结果。比起死记“该用哪个属性”，更需要判断当前元素所处的布局流（普通文档流、Flex、Grid、Table）以及父级是否提供了有效的尺寸约束。很多“调不高”的情况，其实卡在了上三级的某个 height: auto 上。