如何让td里的div自动充满td ?

### 实现TD内两个DIV高度自适应 为了确保`<td>`中的两个嵌套 `<div>` 的高度能够自动适应其父级 `<td>` 单元格的高度，可以采用如下 CSS 布局策略： #### 使用 Flexbox 解决方案 Flexbox 提供了一个强大的工具来创建灵活且响应式的布局。通过将外层容器设置为 `display: flex` 并应用相应的属性，可以使子元素按照预期的方式填充可用空间。 ```css td { height: 20px; } .inner-table { display: flex; flex-direction: column; justify-content: stretch; align-items: stretch; height: 100%; } .inner-box, .another-inner-div { flex-grow: 1; } ``` 上述代码片段中，`.inner-table` 被定义为一个垂直方向上的弹性盒子容器 (`flex-direction: column`)，并强制它的项目沿主轴均匀分布(`justify-content: stretch`) 和交叉轴拉伸 (`align-items: stretch`). 同时给 `.inner-box` 及另一个内部 div 设置 `flex-grow: 1`, 让它们尽可能占据剩余的空间[^1]. #### 表格显示模式解决方案 另一种方式是利用表格显示模型特性: ```css td { position: relative; height: 20px; } .inner-table { display: table; width: 100%; height: 100%; } .inner-box, .another-inner-div { display: table-cell; vertical-align: top; } ``` 这里的关键在于把外部包裹的 `.inner-table` 定义成 `display: table` ，而里面的每一个子项都作为 `table-cell` 来处理，这样就可以自然地继承来自父节点的高度. 对于可能出现的内容溢出问题，可以通过调整 `overflow` 属性或适当增加 `padding`/`margin` 来微调视觉效果. 另外值得注意的是，在某些情况下，浏览器默认样式可能会引入额外间距，因此建议检查是否有不必要的边距影响到整体表现，并考虑重置这些默认值以获得更精确的结果[^2]. 最后提醒一点关于文本换行的问题，当遇到较长单词或其他不可分割内容超出单元格外框的情况时，记得配置合适的断字规则 (如 word-break 或 overflow-wrap)，以免破坏页面结构[^3].