How do I make a div fill an entire table cell?

See http://stackoverflow.com/questions/19684509/how-do-i-make-a-div-fill-an-entire-table-cell/

by pmorch

HTML

<div id="content">
      <table>
        <tr>
          <td>
            <div id="container">
                foo
            </div>
          </td>
          <td>
                <p>foo2</p>
                <p>foo2</p>
                <p>foo2</p>
                <p>foo2</p>
                <p>foo2</p>
                <p>foo2</p>
                <p>foo2</p>
                <p>foo2</p>
                <p>foo2</p>
                <p>foo2</p>
                <p>foo2</p>
                <p>foo2</p>
                <p>foo2</p>
          </td>
      </table>
    </div>

CSS

body, html {
        width: 100%;
        height: 100%;
        padding: 0px;
        margin: 0px;
    }
    #content {
        width: 100%;
        height: 100%;
    }

    #content>table {
        width: 100%;
        /* WhĂ˝ does this make it work? */
        height: 1px;
    }
    #content>table>tbody>tr>td {
        border: 10px solid blue;
        height: 100%;
    }
    #container {
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        border: 10px solid black;
    }

JavaScript

/*

Works in (at least) Chrome, Firefox, Edge and IE11

NOTE: This works only with a huge hack: The "height: 1px" on #content>table .

Problem is that in Chrome, if you disable the height on #content e.g. with the developer tools and then enable it again, the height doesn't "stick" - I haven't found a way to get the height back again.

Also, the border height is calculated differently in Chrome and (FF+Edge+IE). I don't know why.

So this probably isn't as stable as it looks.

But initially it looks good in the big three browsers.

I started by forking this fiddle:
http://jsfiddle.net/F4ESJ/6/
mentioned here: http://stackoverflow.com/a/18488334/345716

*/