如何在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 taller
      <br/>than the
      <br/>first one
    </td>
  </tr>
</table>

通过将td的height设置为1px，子div可以设置height:100%。在Chrome和IE中，100％被解释为“单元格的高度”，而在Firefox中，它似乎变为div内容所需的最大高度。

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

因此，我正在寻找一个-也适用于Firefox的解决方案。

- Wouter

---

可能是重复的问题？https://dev59.com/JWIk5IYBdhLWcg3wRcQo - Narxx

@Narxx：我不这么认为。他们正在使用CSS div表格，而不是HTML表格。虽然我应该转换，但我现在没有时间重构... - Wouter

请注意，在即将发布的Chrome 50版本中，此行为将从IE的行为更改为Firefox的行为。 - dgrogan

HTML与div表格并不重要。从Chrome 50开始，任何{具有％高度的块}作为{自动高度的表格单元格}的子级将被视为指定了height：auto。这符合CSS规范和FF行为，但与IE不同。很容易回到旧的行为：在表格单元格上指定height：100％即可。 - dgrogan

告诉未来的读者，Chrome 50的更改已经被撤销了；这破坏了太多现有的布局。 - dgrogan

Answer 1

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

Example that works in Firefox, IE and 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 taller
      <br/>than the
      <br/>first one
    </td>
  </tr>
</table>

- Rob Howells

---

使用inline-table也可以让它在Chrome中工作。但是在IE中不行。离成功又近了一步.... :) - Wouter

通过CSS，可以将Firefox的高度设置为100％，但对于其他浏览器，则可以将其设置为1像素。这是一个可行的解决方案。我仍然需要在Safari中进行测试...我将把这个作为你答案的示例添加进去，这样我就可以接受它作为完整的答案。 - Wouter

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>

- karan mohnani

---

这将使得第一个单元格的高度固定在100像素，甚至比第二个单元格的高度还要高。此外，当从第二个单元格中删除文本时，它将防止第一个单元格变得不那么高。我正在寻找一种灵活的解决方案，适用于任何单元格高度。 - Wouter