内容被DIV推倒

Question

这是一个基于这个问题的问题： Twitter bootstrap 3 two columns full height

我有相同的布局。但是，当我尝试在内容部分放置DIV时，它会推动侧边栏的内容。这是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;
}

如果你有其他建议，我需要使用Bootstrap和Angular进行以下布局，保持从上面的帖子中获得全高列的想法：

  +-------------------------------------------------+
  |                     Header                      |
  +------------+------------------------------------+
  | Nav.Header |    ContentHeader               | < |
  |------------|------------------------------------|
  |Navigation  |         Content                | T |
  |            |                                | E |
  |            |                                | X |
  |            |                                | T |
  |            |                                |   |
  |            |                                |   |
  |            |                                |   |
  +------------+------------------------------------+

谢谢