在表格单元格中使 div 高度 100% [重复]

Question

当行被另一个单元格中的自动换行拉伸时，如何使单元格表中的 div 达到 100% 高度。

在这个Fiddle 中，我想让第二个单元格中的 div 填充整个单元格（高度的 100%）。

td {
  border: 1px solid red;
  width: 50%;
  background-color: yellow;
}
td div {
  background-color: green;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

<table>
  <tr>
    <td>
      <div>
        abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde
      </div>
    </td>
    <td>
      <div>
        xxx
      </div>
    </td>
  </tr>
</table>

Answer 1

编辑

正如下面的 cmets 所述，我的第一种方法 display: inline-block 在 Firefox 中不起作用。

正如 progysm 提到的，使用 tr, td{height: 100%} 在所有浏览器上都能正常工作，请参阅小提琴 http://jsfiddle.net/3v4wz030/61/

td div {
    background-color: green;
    width:100%;
    height: 100%;
    margin: 0;
    padding:0;
}
 tr, td { height: 100%; } 

下面的代码在 Firefox 中不起作用，我第一次尝试失败了

只需添加display: inline-block 见小提琴http://jsfiddle.net/3v4wz030/39/

td div {
    background-color: green;
    width:100%;
    height: 100%;
    display:inline-block;
    margin: 0;
    padding:0;
}

Answer 2

如果你只需要背景色覆盖整个单元格，你可以设置在td而不是div。

td:last-child {
  background-color: green;
}

如果您确实需要使div 覆盖单元格，您可以尝试使用position 技巧。请注意，此方法仅适用于第二个单元格中的数据较少时。

td {
  position: relative;
}
td:last-child div {
  background-color: green;
  width:100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

jsFiddle