[FIXED] How to make div height to 100% of parent td

Issue

This is my current code:

table{
    table-layout: fixed;
}
table tr td{
    height: 100%;
}
table tr td div{
    height: 100%;
    background: red;
}

<table width="200" border="1">
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><div>Test</div></td>
      <td>Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

As you can see the red div doesn't take the 100% of the parent td. I can't set fix dimensions to the parents, as they should adjust automatically to the content.

How can I set the div height to be 100% like the parent td height?

Solution

This should work for you:

table{
    table-layout: fixed;
    height:100%;
}

table tr td div{
    height: 100%;
    background: red;
    top:0;
}

<table width="200" border="1">
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><div>Test</div></td>
      <td>Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

Answered By - RacoonOnMoon

Answer Checked By - Candace Johnson (PHPFixing Volunteer)