如何在Firefox中使<div>填充<td>高度

Question

在这里,IE和Chrome已经回答了这个问题,但是建议的解决方案似乎不适用于Firefox 16,45,也可能是介于两者之间的所有版本.

基本上,建议的解决方案如下:

table,th,td {
  border: 1px solid black;
}

<table>
  <tr>
    <td style="height:1px;">
      <div style="border:1px solid red; height:100%;">
        I want cell to be the full height
      </div>
    </td>
    <td>
      This cell
      <br/>is higher
      <br/>than the
      <br/>first one
    </td>
  </tr>
</table>

通过设定height的td到1px,孩子div可以设置height:100%.在Chrome和IE中,100%它被解释为"单元格的高度",而在Firefox中它似乎成为divs内容所需的最大高度 .

在Firefox中运行上面的示例将直观地说明这一点......

所以,我正在寻找一种在Firefox中也能运行的解决方案.

Answer 1

尝试添加display: table到您的嵌套<div>,并更改height: 1px到height: 100%父<td>

适用于Firefox,IE和Chrome的示例

table,
th,
td {
  border: 1px solid black;
}

.fix_height {
  height: 1px;
}

@-moz-document url-prefix() {
   .fix_height {
        height: 100%;
    }
}

<table>
  <tr>
    <td class="fix_height">
      <div style="border:1px solid red; height:100%; display:inline-table">
        I want cell to be the full height
      </div>
    </td>
    <td>
      This cell
      <br/>is higher
      <br/>than the
      <br/>first one
    </td>
  </tr>
</table>