Make div with display:table have 100% height of parent div

Question

I am trying to make a div with display:table fill 100% of its parent div. Here is the div structure:

<div id="container">
   <div id="header"></div>
   <div id="body">
       <div id="mytablediv">
    <div class="row">
             <div id="left"> </div>
             <div id="content">&nbsp; </div>
                 <div id="right"> </div>
            </div>
       </div>
   </div>
   <div id="footer"></div>
</div>

And here is the CSS:

html, body { margin:0; padding:0; height:100%; }
#container { min-height:100%; position:relative; }
#header { background:#ff0; padding:10px; }
#body { padding:10px; padding-bottom:60px; }
#footer { position:absolute; bottom:0; width:100%; height:60px;background:#6cf;
}
#mytablediv { display:table; }
#row { display:table-row; }
#left, #content, #right {display:table-cell;}
#left, #right {background-color:red;}

That's my full code. Now what I really want to do for #mytablediv is to fill the entire white space between the header and the footer.

Here is a live jsFiddle example.

Answer 1

You can use the inheritance property here and just use the following for #mytablediv

#mytablediv {
    height: inherit;
}

You have specified div#container as 100% height, you would need to assign the above property to div#body to get the desired result.

Answer 2

For a percentage height to work on #mytablediv (or any other element for that matter), it's parent must have some kind of height set on it. That parent's height can be a percentage too, but, in that case, for that percentage to work, it's own parent (#mytablediv's grandparent) must also have some kind of height set on it. And this goes all the way up to the html element.

In your case, if you want the #mytablediv to have 100% of the height of the page (window actually), then you'll want the "specific height" to be 100% on all of the ancestors.

html,
body,
#container,
#body {
    height: 100%
}

/* now this works */
#mytablediv {
    height: 100%;
}

Here's a demo: https://jsfiddle.net/joplomacedo/u4hezyav/