try

<div class="container">
    <div class="row">
        <div class="col-md-12">header section</div>

    </div>
     <div class="row fill">
        <div class="col-md-4">Navigation</div>
        <div class="col-md-8">Content</div>

    </div>
</div>

fill类的CSS如下所示

 .fill{
    width:100%;
    height:100%;
    min-height:100%;
    padding:10px;
    color:#efefef;
    background: blue;
}
.col-md-12
{
    background: red;

}

.col-md-4
{
    background: yellow;
    height:100%;
    min-height:100%;

}
.col-md-8
{
    background: green;
    height:100%;
    min-height:100%;

}

为了供你参考，请看看小提琴。

如果你所关心的只是设定颜色，有一个更简单的方法。

把这个放在你身体标签的第一个或最后一个

<div id="nfc" class="col col-md-2"></div>

这是CSS

#nfc{
  background: red;
  top: 0;
  left: 0;
  bottom: 0;
  position: fixed;
  z-index: -99;
}

你只是在创建一个形状，把它固定在页面后面，然后把它拉伸到最大高度。通过使用现有的引导类，您将获得正确的宽度，并且它将保持响应。

ofc的这种方法有一些限制，但如果它用于页面的根结构，它是最好的答案。

纯CSS解决方案

工作小提琴

仅使用CSS2.1，适用于所有浏览器(IE8+)，不指定任何高度或宽度。

这意味着如果你的标题突然变长了，或者你的左侧导航需要放大，你不需要在CSS中修改任何东西。

完全响应，简单明了，非常容易管理。

<div class="Container">
    <div class="Header">
    </div>
    <div class="HeightTaker">
        <div class="Wrapper">
            <div class="LeftNavigation">
            </div>
            <div class="Content">
            </div>
        </div>
    </div>
</div>

Explanation: The container div takes 100% height of the body, and he's divided into 2 sections. The header section will span to its needed height, and the HeightTaker will take the rest. How is it achieved? by floating an empty element along side the container with 100% height (using :before), and giving the HeightTaker an empty element at the end with the clear rule (using :after). that element cant be in the same line with the floated element, so he's pushed till the end. which is exactly the 100% of the document.

这样，我们就可以让highttaker跨越容器高度的其余部分，而不需要声明任何特定的高度/边距。

在highttaker内部，我们建立了一个正常的浮动布局(以实现类似列的显示)，并进行了微小的改变。我们有一个Wrapper元素，这是100%高度工作所需要的。

更新

下面是带有Bootstrap类的演示。(我只是在你的布局中添加了一个div)

现代且非常简单的解决方案:

HTML:

<div class="container">
  <div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-9"></div>
  </div>
</div>

CSS:

.row {
    display: flex;
}

你可以达到你想要的填充底部:100%;margin-bottom: -100%;戏法，你可以在这把小提琴上看到。

我稍微改变了你的HTML，但是你可以用下面的代码用你自己的HTML达到同样的结果

.col-md-9 {
    overflow: hidden;
}

.col-md-3 {
    padding-bottom: 100%;
    margin-bottom: -100%;
}

因此，你的最佳选择似乎是用负边际底部策略来对抗填充底部。

我举了两个例子。一个是<header>在.container内，另一个是<header>在.container外。

两个版本都可以正常工作。注意使用下面的@media查询，这样它就可以在较小的屏幕上删除额外的填充…

@media screen and (max-width:991px) {
    .content { padding-top:0; }
}

除此之外，这些例子应该可以解决您的问题。