How to make <div> fill <td> height in Firefox

Question

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.

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.

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

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

Answer 1

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

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 higher
      <br/>than the
      <br/>first one
    </td>
  </tr>
</table>