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

【问题标题】：How to make <div> fill <td> height in Firefox如何在 Firefox 中使 <div> 填充 <td> 高度
【发布时间】：2016-08-03 05:13:42
【问题描述】：

Over here，已针对 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>

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

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

所以，我正在寻找一种同样适用于 Firefox 的解决方案。

【问题讨论】：

可能重复？ stackoverflow.com/questions/19428121/…
@Narxx：我不这么认为。他们使用的是 css div-tables，而不是 html 表格。虽然我应该切换，但我没有时间重构 atm...
请注意，在 chrome 50（即将推出）中，这种行为会从 IE 变为 Firefox。
HTML 与 div 表无关紧要。从 chrome 50 开始，任何 {blocks with % height} 都是 {table cells with auto height} 的子级，将被视为指定了 height: auto 。这符合 CSS 规范和 FF 行为，但与 IE 不同。回到旧的行为很容易：在表格单元格上指定 height:100%。
仅供未来读者参考，对 chrome 50 的更改已恢复；破坏了太多现有的布局。

标签： html css html-table

【解决方案1】：

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

适用于 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>

【讨论】：

使用 inline-table 也可以在 Chrome 中工作。但不是在 IE 中。越来越近了...... :)
通过 css 可以将 firefox 的高度设置为 100%，但对于其他浏览器可以设置为 1px。这是一个可行的解决方案。我仍然需要在 Safari 中对其进行测试...我会将此作为示例添加到您的答案中，因此我可以接受它作为完整答案。

【解决方案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>

【讨论】：

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