Table Element Not Taking 100% Of Parent Element

Question

I created a sample of the situation in JSFiddle

I updated JSFiddle Here: http://jsfiddle.net/x11joex11/r5spu85z/8/ (this shows in more detail how the sticky footer works so well, just height issue).

I want the table to take up the remaining height, for some reason the height: 100% is not working?

From my tests it appears to be related to min-height: 100%. I need that to make the sticky footer work.

So a solution for me is another way to do the sticky footer, or a way to still give 100% height to the elements within.

HTML

<div class="wrapper">
  <div class="wrapper_content">
    <!--Header-->
    <div class="header">Header</div>
    <div class="content table">
      <div class="row">
        <div class="l_cell">left</div>
        <div class="r_cell">right</div>
      </div>
    </div>
    <div class="push"></div>
  </div>
</div>
<!--Footer-->
<div class="footer">Footer</div>

CSS

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}

.wrapper {
    min-height: 100%;
    margin: 0 auto -50px;
    background-color: black;
}

.container {
}

.table {
    display: table;
    height: 100%;
    width: 100%;
    background-color: yellow;
}

.row {
    display: table-row;
}

.l_cell {
    display: table-cell;
    width: 265px;
    background-color: orange;
}

.r_cell {
    display: table-cell;
    background-color: purple;
}

.header {
    background-color: red;
    width: 100%;
}

.footer {
    height: 50px;
    background-color: green;
}

.push {
    height: 50px;
}

Answer 1

I found an answer to my problem for now, but it requires the use of display:table which I recall causes other errors down the road, but it does appear to work right now to create the layout I had in mind.

http://jsfiddle.net/x11joex11/r5spu85z/10/

CSS

body,html{margin:0;padding:0;height:100%;}
.wrapper{}
.table{
   height:100%;
   width:100%;
   display:table;
   background-color:yellow;
}
.row{display:table-row;}
.cell{display:table-cell;}
.footer{background-color:green;height:50px;}
.header{background-color:red;height:30px;}
.left{background-color:purple;}
.right{background-color:orange;}

HTML

<div class="wrapper table">
    <div class="header row">
        Header<br/>
        Header2
    </div>
    <div class="content table">
        <div class="row">
            <div class="cell left">leftt<br/>left2</div>
            <div class="cell right">right<br/>right2</div>
        </div>
    </div>
    <div class="footer row">
        Footer
        <br/>
        Footer2
    </div>
</div>

An answer not requiring the use of display:table or table tags is preferred.

Notice the sticky footer effect remains.