在表格单元格中使div高度为100％

Question

当通过换行在另一个单元格中拉伸行时，如何在单元格表中使div高度为100％。

在这个小提琴中，我想在第二个单元格中使用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

如果只需要背景颜色覆盖整个单元格，则可以将其设置为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

Answer 2

编辑

如以下评论中所述，我的第一种方法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;
}