html元素高度需通过子元素或css控制；height:100%生效前提为父容器有明确高度；推荐用min-height:100vh确保占满视口；flex布局中子元素需align-items:stretch或flex:1才能拉伸；表格单元格高度需table-layout:fixed配合设置。
HTML 元素的高度不能靠 标签本身调高——它是个根容器，高度默认由内容撑开或受视口限制。真正要调整的是它的子元素（比如 、
）或通过 CSS 控制渲染行为。
想让元素占满整个视口？优先用
Flex 布局中子元素高度不随父容器拉伸？检查
表格单元格（
height: 100% 不生效？先检查父容器高度是否明确
这是最常见失效原因：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 上。
）高度调不上去？别只盯 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 上。