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

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;
}

一个纯粹的CSS解决方案是很简单的，它就像一个跨浏览器的魅力。

只需向nav列和content列添加一个较大的内边距和一个同样大的负边距，然后将它们的行包装到一个隐藏了溢出的类中。 实时视图 编辑视图

超文本标记语言

<div class="container">

  <div class="row">
    <div class="col-xs-12 header"><h1>Header</h1></div>
  </div>

  <div class="row col-wrap">

    <div class="col-md-3 col">
      <h1>Nav</h1>
    </div>

    <div class="col-md-9 col">
      <h1>Content</h1>
    </div>

  </div>
</div>

CSS

.col{
margin-bottom: -99999px;
padding-bottom: 99999px;
}

.col-wrap{
overflow: hidden; 
}  

好运！

我写了一个与Bootstrap兼容的简单CSS来创建完整的宽度和高度表:

小提琴:https://jsfiddle.net/uasbfc5e/4/

原则是:

在主DIV上添加“tablefull” 然后，下面的DIV将隐式地创建行 行下面的DIV是单元格 你可以使用类"tableheader"作为头文件或类似的文件

HTML:

<div class="tablefull">
    <div class="tableheader">
        <div class="col-xs-4">Header A</div>
        <div class="col-xs-4">B</div>
        <div class="col-xs-4">C</div>
    </div>
    <div>
        <div class="col-xs-6">Content 50% width auto height</div>
        <div class="col-xs-6">Hello World</div>
    </div>
    <div>
        <div class="col-xs-9">Content 70% width auto height</div>
        <div class="col-xs-3">Merry Halloween</div>
    </div>
</div>

CSS:

div.tablefull {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
}

div.tablefull>div.tableheader, div.tablefull>div.tableheader>div{
    height: 0%;
}

div.tablefull>div {
    display: table-row;
}

div.tablefull>div>div {
    display: table-cell;
    height: 100%;
    padding: 0;
}

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%;

}

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

你在JAvascript的部分中看到引导程序的修复了吗??

我认为这是最好最简单的解决办法。

看看那里:http://getbootstrap.com/javascript/#affix

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

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

<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的这种方法有一些限制，但如果它用于页面的根结构，它是最好的答案。