如何让td内的div占满100%高度（无需指定父元素高度）

需求：让所有橙色div拉伸至所在td的全部高度，无需指定父元素高度，尝试过flex相关组合但未达预期。

最简解决方案：将td设置为flex容器 #

表格单元格的高度由表格布局自动计算，普通块级元素无法直接继承这种动态高度，但把td转为flex容器后，子元素默认会沿垂直方向拉伸，刚好填满单元格高度。

修改后的完整代码 #

CSS 代码

td {
  background-color: aliceblue;
  display: flex; /* 核心：把td变成flex容器 */
}

.orange-div {
  background-color: orange;
  width: 100%; /* 确保div宽度填满单元格，可选 */
}

HTML 代码

<table style="width: 800px;position: absolute;">
  <tbody>
    <tr>
      <td>cell 1</td>
      <td>cell 2</td>
      <td>cell 3</td>
      <td rowspan="3">normal text in a td is using 100% height.</td>
      <td rowspan="3">
        <div class="orange-div">a div inside a rowspan td is now using 100% height.</div>
      </td>
    </tr>
    <tr>
      <td>cell a</td>
      <td>cell b</td>
      <td>cell c</td>
    </tr>
    <tr>
      <td>cell x</td>
      <td>
        <div class="orange-div">a div inside a td is now using 100% height.</div>
      </td>
      <td>
        <div style="width: 100px; height: 100px; background-color: lightgreen; padding: 8px">a large cell</div>
      </td>
    </tr>
  </tbody>
</table>

原理解析 #

• 表格单元格的高度属于动态计算高度，普通块级元素的height: 100%需要父元素有明确的数值高度才能生效，因此之前的尝试无效。
• flex容器默认的align-items: stretch属性会强制子元素沿交叉轴（垂直方向）填满容器空间，完美适配表格单元格的自动高度。

备选方案：绝对定位法 #

若不想修改td的display属性，可采用绝对定位实现：

1. 给目标td添加position: relative;
2. 给橙色div添加position: absolute; top: 0; bottom: 0; left: 0; right: 0;

但该方法会让div脱离文档流，可能影响单元格内其他元素布局，优先推荐flex方案。

内容的提问来源于stack exchange，提问作者shaft