Content is pushed down by DIV - html

Question

This is a question based on this question:
Twitter bootstrap 3 two columns full height
I have the same layout. But, when I try to put a DIV in the content part, it pushes the content of the sidebar down. Here's a Fiddle
<header>Header</header>
<div class="container">
<div class="row">
<div class="col-md-3 no-float">Navigation</div>
<div class="col-md-9 no-float"><div><div style="width=100%;height:55px;background:red"></div>Content</div></div>
</div>
CSS:
html,body,.container
{
height:100%;
}
.container
{
display:table;
width: 100%;
margin-top: -50px;
padding: 50px 0 0 0; /*set left/right padding according to needs*/
-moz-box-sizing: border-box;
box-sizing: border-box;
}
header
{
background: green;
height: 50px;
}
.row
{
height: 100%;
display: table-row;
}
.col-md-3.no-float, .col-md-9.no-float {
float: none; /* thanks baxabbit */
}
.col-md-3
{
display: table-cell;
background: pink;
}
.col-md-9
{
display: table-cell;
background: yellow;
float: none;
}
If you have other suggestions, I need to do the following layout using Bootstrap and Angular, keeping the idea of having full-height columns from the upper post:
+-------------------------------------------------+
| Header |
+------------+------------------------------------+
| Nav.Header | ContentHeader | < |
|------------|------------------------------------|
|Navigation | Content | T |
| | | E |
| | | X |
| | | T |
| | | |
| | | |
| | | |
+------------+------------------------------------+
Thank you