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

Question

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

In principle, 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 height from td to 1px , the child div can set height:100% . In Chrome and IE, 100% then interpreted as "cell height", and in Firefox, the maximum height required for div content.

Running the above example in Firefox illustrates 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% to the parent <td>

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

Answer 2

Try the following, that it works in Firefox. You just have to replace% pixels with height

 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>