How to get div height 100% inside td of 100%

Question

This question seems to have been asked at least 10 other times here on stackoverflow but not one of them actually has an answer. This one is slightly different in that the issue appears in Firefox.

I have a table height 100%, with a tr height 100%. I set the border of the td to something I can see. I see that the td is 100% as expected. I put a div in that td and set it to height 100%. It's 100% in Chrome. It's NOT 100% in Firefox.

How do I fix this?

Example

<!DOCTYPE html>
<html>
<head>
<style>
body, html {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
}
.full {
    width: 100%;
    height: 100%;
    border: 10px solid red;
}
#content {
    width: 100%;
    height: 100%;
}

#content>table {
    width: 100%;
    height: 100%;
}
#content>table>tbody>tr>td {
    border: 10px solid blue;
    width: 50%;
}
#container {
    width: 100%;
    height: 100%;
    border: 10px solid black;
}
</style>
</head>
<body>
<div id="content">
  <table>
    <tr>
      <td>
        <div id="container">
          <div class="full">
            foo
          </div>
        </div>
      </td>
    </tr>
  </table>
</div>
</body>
</html>

Here's a snippet

body,
html {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

.full {
  width: 100%;
  height: 100%;
  border: 10px solid red;
}

#content {
  width: 100%;
  height: 100%;
}

#content>table {
  width: 100%;
  height: 100%;
}

#content>table>tbody>tr>td {
  border: 10px solid blue;
}

#container {
  width: 100%;
  height: 100%;
  border: 10px solid black;
}

<div id="content">
  <table>
    <tr>
      <td>
        <div id="container">
          <div class="full">
            foo
          </div>
        </div>
      </td>
    </tr>
  </table>
</div>

In Chrome you'll see

 bbbbbbbbbbb
 b#########b
 b#rrrrrrr#b
 b#r     r#b
 b#r     r#b
 b#r     r#b
 b#rrrrrrr#b
 b#########b
 bbbbbbbbbbb

Whereas in Firefox it's

 bbbbbbbbbbb
 b         b
 b#########b
 b#rrrrrrr#b
 b#r     r#b
 b#rrrrrrr#b
 b#########b
 b         b
 bbbbbbbbbbb

where b = blue td. # = black div that should be 100%. r = red inner div that should also be 100% (and apparently is in either case). It's the black one that's wrong.

What CSS do I have to fix to get Firefox to behave like Chrome in this case?

PS: Yes I need a table. I'm displaying tabular data. The example above is simplified to a single cell to simplify debugging.

Yes indeed. I don't know if there would be a *perfect* fix for that one. There is an interesting [thread](http://stackoverflow.com/questions/1110915/is-a-div-inside-a-td-a-bad-idea) about it. — Brewal, Aug 28 '13 at 12:45
IE11 has the same Issue as Firefox, the result looks the same. The solution below also works for IE11. — vanthome, May 09 '14 at 16:36

score 30 · Accepted Answer · answered Aug 28 '13 at 12:46

30

You need to set the height of the td to 100% too:

<td style="height: 100%">

jsFiddle

answered Aug 28 '13 at 12:46

Tomzan

2,808
14
25

interesting, even though the td is clearly already at 100% height by looking at the border being drawing for it :-( – gman Aug 28 '13 at 12:48
1

I did not put height on the and it works on chrome and firefox. – Achraf JEDAY Aug 26 '17 at 08:20
1

I dunno if Chrome has change his algorithm, but that doesn't seems to be the good solution anymore in 2019. In a project we have, it does work randomly in some cells; some don't. Ones that are not well formed, if I go in F12, click / unclick the CSS height:100% of the div, it do work after that until next refresh. Weird issue here. – Simon Dugré Sep 10 '19 at 19:49
5

The only thing that worked for me in Chrome in 2019 was this solution: https://stackoverflow.com/a/28486954/136590 Basically, you set `` and ``. I have no idea why that works, but it does :( – Michael Sep 11 '19 at 16:35
1

It works if you set both cell and row to 100% and if you only target Firefox. On the other hand, Chrome needs the cell to have a fixed height, even zero. Therefore the full solution is: `th, td { height: 0; } @-moz-document url-prefix() { tr, th, td { height: 100%; } }` (use them in that order) – Tobia Jun 29 '21 at 15:07
Also don't forget to provide content. If you want the cell to be empty you can add an alternative whitespace symbol: ` ` – Antoni Silvestrovič Jul 18 '23 at 12:51

score 4 · Answer 2 · answered Aug 28 '13 at 12:45

4

I think it's because firefox need all elements to have 100% height in the css, including your TD.

#content>table>tbody>tr>td {
    border: 10px solid blue;
    width: 50%;
    height: 100%;
}

Got it working with firefox with this.

answered Aug 28 '13 at 12:45

Razz

3,995
1
18
15

score 0 · Answer 3 · answered Jul 21 '21 at 18:26

CSS often require some tricks.

Why not adding a big big padding and negative margin to all the divs, and hide the tds overflow?

td {
    padding: 1rem 2rem;
    max-width: 6rem;
    overflow: hidden;
}
td > div {
    margin: -150px;
    padding: 150px;
}

Here's a pen: https://codepen.io/migli/pen/ZEKXWGE

I didn't test in many browsers, but I guess it should work everywhere?

How to get div height 100% inside td of 100%

3 Answers3

Linked