如何使跨行合并（rowspan）表格单元格内的Div垂直填满整个单元格？

这个场景我之前处理过，直接给div加height: 100%之所以不生效，是因为带rowspan的<td>高度是由同行其他单元格的内容自动计算出来的，它本身没有明确的高度值，导致子元素的百分比高度找不到参考基准。下面给你几个实用的解决思路：

方法1：绝对定位法（兼容性好） #

给跨行的<td>设置相对定位，让内部<div>通过绝对定位撑满整个单元格：

<table>
  <tbody>
    <tr>
      <td rowspan="2" style="background-color: yellow; position: relative;">
        <div style="background-color: red; width: 200px; position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
          Some text
        </div>
      </td>
      <td style="background-color: lightgreen; width: 200px;">
        Row 1.1<br /> Row 1.2<br /> Row 1.3
      </td>
    </tr>
    <tr>
      <td style="background-color: lightblue; width: 200px;">
        Row 2.1<br /> Row 2.2<br /> Row 2.3
      </td>
    </tr>
  </tbody>
</table>

原理：<td>设置position: relative后，内部绝对定位的元素会以这个<td>为参考容器，top:0; bottom:0; left:0; right:0会强制元素填满整个容器空间。如果需要内边距，可以给div加上box-sizing: border-box，避免内容超出单元格。

方法2：Flex布局法（现代浏览器优先） #

利用Flex布局的特性，让<td>变成Flex容器，内部<div>自动填充高度：

<table>
  <tbody>
    <tr>
      <td rowspan="2" style="background-color: yellow; display: flex;">
        <div style="background-color: red; width: 200px; flex: 1;">
          Some text
        </div>
      </td>
      <td style="background-color: lightgreen; width: 200px;">
        Row 1.1<br /> Row 1.2<br /> Row 1.3
      </td>
    </tr>
    <tr>
      <td style="background-color: lightblue; width: 200px;">
        Row 2.1<br /> Row 2.2<br /> Row 2.3
      </td>
    </tr>
  </tbody>
</table>

原理：给<td>设置display: flex后，它的子元素会默认垂直填充容器高度，flex:1则确保div占满容器的可用空间，即使td高度随内容变化也能自动适配。

额外提示 #

两种方法都不需要手动设置固定高度，能完美适配表格单元格的动态高度变化，你可以根据项目的浏览器兼容性需求选择合适的方案。

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