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

修改

正如下面的评论所述，我的第一个方法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

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

2 个答案: