html - height: 100% for <div> inside <div> with display: table-cell -

here 2 column markup using display: table , display: table-cell css declarations: html:

<div class="table">     <div class="cell">         <p>text         <p>text         <p>text         <p>text         <p>text         <p>text         <p>text         <p>text     </div>     <div class="cell">         <div class="container">text</div>     </div> </div> 

css:

.table {     display: table; }  .cell {     border: 2px solid black;     vertical-align: top;     display: table-cell; }  .container {     height: 100%;     border: 2px solid green; } 

but .container block not fill parent cell vertically. here example on jsfiddle: http://jsfiddle.net/mgrdp/2.

what have | what need

please, not propose js solution.

when use % setting heights or widths, set widths/heights of parent elements well

try updated fiddle

http://jsfiddle.net/mgrdp/6/