如何使填充高度[英]How to make fill height in Firefox 本文翻译自 Wouter 查看原文 2016-04-12 1614 css/ html/

Over here, this question has been answered for IE and Chrome, but the proposed solution does not seem to work in Firefox 16, 45, and probably all versions in between.

在这里，这个问题已经得到了IE和Chrome的响应，但是建议的解决方案似乎并没有在Firefox 16、45和可能的所有版本中工作。

Basically, the proposed solution is as follows:

提出的解决方案基本如下:

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>

By setting the height of the td to 1px, the child div can set height:100%. In Chrome and IE the 100% is then interpreted as "the height of the cell", while in Firefox it seems to become the max height needed for the divs content.

通过将td的高度设置为1px，子div可以将高度设置为100%。在Chrome和IE中，100%被解释为“细胞的高度”，而在Firefox中，100%被解释为divs内容所需的最大高度。

Running the example above in Firefox will illustrate this intuitively...

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

So, I'm looking for a solution that -also- works in Firefox.

所以，我正在寻找一个在Firefox中也能工作的解决方案。

2 个解决方案

#1

Try adding display: table to your nested <div>, and change height: 1px to height: 100% on the parent <td>

尝试将display: table添加到嵌套的

，并将高度:1px更改为height: 100%在父上

Example that works in Firefox, IE and Chrome

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

#2

Try the following it works in Firefox.Just you have to replace the % with pixels for height

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

#1