title: How to get div height 100% inside td of 100%
body: <p>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.</p>
  <p>I have a <code>table</code> height 100%, with a <code>tr</code> height 100%. I set the border of the <code>td</code> to something I can see. I see that the <code>td</code> is 100% as expected. I put a <code>div</code> in that <code>td</code> and set it to height 100%. It's 100% in Chrome. It's NOT 100% in Firefox.</p>
  <p>How do I fix this?</p>
  <p>Example</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  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&gt;table {
      width: 100%;
      height: 100%;
  }
  #content&gt;table&gt;tbody&gt;tr&gt;td {
      border: 10px solid blue;
      width: 50%;
  }
  #container {
      width: 100%;
      height: 100%;
      border: 10px solid black;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id=&quot;content&quot;&gt;
    &lt;table&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;div id=&quot;container&quot;&gt;
            &lt;div class=&quot;full&quot;&gt;
              foo
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Here's a snippet</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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&gt;table {
    width: 100%;
    height: 100%;
  }
  
  #content&gt;table&gt;tbody&gt;tr&gt;td {
    border: 10px solid blue;
  }
  
  #container {
    width: 100%;
    height: 100%;
    border: 10px solid black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="content"&gt;
    &lt;table&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;div id="container"&gt;
            &lt;div class="full"&gt;
              foo
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>In Chrome you'll see</p>
  <pre><code> bbbbbbbbbbb
   b#########b
   b#rrrrrrr#b
   b#r     r#b
   b#r     r#b
   b#r     r#b
   b#rrrrrrr#b
   b#########b
   bbbbbbbbbbb
  </code></pre>
  <p>Whereas in Firefox it's</p>
  <pre><code> bbbbbbbbbbb
   b         b
   b#########b
   b#rrrrrrr#b
   b#r     r#b
   b#rrrrrrr#b
   b#########b
   b         b
   bbbbbbbbbbb
  </code></pre>
  <p>where b = blue <code>td</code>. # = 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.</p>
  <p>What CSS do I have to fix to get Firefox to behave like Chrome in this case?</p>
  <p>PS: Yes I need a table. I'm displaying tabular data. The example above is simplified to a single cell to simplify debugging.</p>