How to make div same height as parent (displayed as table-cell)

Question

I got a container div containing three child divs (vary in content) - each as tall as the tallest one. I managed this by setting the container to display:table and the child divs to display:table-cell etc.

Everything worked just fine, until...

I inserted a new div inside one of the child divs and tried to make it height:100% - so it would stretch to the same height as its parents, but that did not work.

Please see my JSFiddle: http://jsfiddle.net/bkG5A/

Any help would be greatly appreciated!

HTML

<div class="container">     <div class="child">         a<br />a<br />a     </div>     <div class="child">         a<br />a<br />a<br />a<br />a<br />a<br />a     </div>     <div class="child">         <div class="content">             a<br />a<br />a         </div>     </div> </div> 

CSS

.container {     display: table; } .child {     width: 30px;     background-color: red;     display: table-cell;     vertical-align: top; } .content {     height: 100%;     background-color: blue; } 

Answer 1

Another option is to set your child div to display: inline-block;

.content {     display: inline-block;     height: 100%;     width: 100%;     background-color: blue; } 

.container {    display: table;  }  .child {    width: 30px;    background-color: red;    display: table-cell;    vertical-align: top;  }  .content {    display: inline-block;    height: 100%;    width: 100%;    background-color: blue;  }

<div class="container">    <div class="child">      a      <br />a      <br />a    </div>    <div class="child">      a      <br />a      <br />a      <br />a      <br />a      <br />a      <br />a    </div>    <div class="child">      <div class="content">        a        <br />a        <br />a      </div>    </div>  </div>

---

JSFiddle Demo

Answer 2

You have to set the height for the parents (container and child) explicitly, here is another work-around (if you don't want to set that height explicitly):

.child {   width: 30px;   background-color: red;   display: table-cell;   vertical-align: top;   position:relative; }  .content {   position:absolute;   top:0;   bottom:0;   width:100%;   background-color: blue; } 

Fiddle