Question

Over here，IE和Chrome已经回答了这个问题，但是建议的解决方案在Firefox 16,45中似乎不起作用，可能还介于两者之间。

基本上，建议的解决方案如下：

＆＃13;

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

＆＃13;

<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>

＆＃13;

通过将height的{{1}}设置为td，孩子1px可以设置div。在Chrome和IE中，height:100%被解释为＆＃34;单元格的高度＆＃34;，而在Firefox中它似乎成为100%内容所需的最大高度。

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

所以，我正在寻找一种能够在Firefox中运行的解决方案。

Answer 1

尝试将display: table添加到嵌套<div>，并将height: 1px更改为父height: 100%

上的<td>

适用于Firefox，IE和Chrome的示例

＆＃13;

table,
th,
td {
  border: 1px solid black;
}

.fix_height {
  height: 1px;
}

@-moz-document url-prefix() {
   .fix_height {
        height: 100%;
    }
}

＆＃13;

<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>

＆＃13;

Answer 2

尝试以下它可以在Firefox中使用。您必须将％替换为高度像素

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

<table>
  <tr>
    <td style="height:1px;">
      <div style="border:1px solid red; height:100px;">
        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>

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

2 个答案: