Situation
table > tr > td> div
div height should be 100%

Problem
In Firefox div height 100% requires tr, td height to be equal to 100%.
In Chrome div height 100% becomes zero when tr, td height is set to 100%.

Solution
Setting tr, td height to be equal to 100% for target Firefox only

Code

...
        <tr>
          <td>
            <div></div>
          </td>
        </tr>
...

...
  @supports (-moz-appearance none)
  tr, td
    height 100%

  div
    height 100%
...

Documentation:

• 100% height div inside table-cell not working on Firefox
• How to get div height 100% inside td of 100%
• Targeting only Firefox with CSS
• @supports not (...) isn't working

No Comments