如果行后没有内容(全屏高度取)，使用位置的窍门:固定;高度:100%对于.col:before元素可以很好地工作:

header { background: green; height: 50px; } .col-xs-3 { background: pink; } .col-xs-3:before { background: pink; content: ' '; height: 100%; margin-left: -15px; /* compensates column's padding */ position: fixed; width: inherit; /* bootstrap column's width */ z-index: -1; /* puts behind content */ } .col-xs-9 { background: yellow; } .col-xs-9:before { background: yellow; content: ' '; height: 100%; margin-left: -15px; /* compensates column's padding */ position: fixed; width: inherit; /* bootstrap column's width */ z-index: -1; /* puts behind content */ } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <header>Header</header> <div class="container-fluid"> <div class="row"> <div class="col-xs-3">Navigation</div> <div class="col-xs-9">Content</div> </div> </div>

据我所知，你可以使用5种方法来完成这个任务:

使用CSS显示表/表格单元格属性或使用实际的表。 在包装器内使用绝对定位元素。 使用Flexbox显示属性，但到今天为止，它仍然有部分支持 使用伪列技术模拟全列高度。 使用填充/边距技术。看到的例子。

Bootstrap:我在这方面没有太多经验，但我不认为他们提供了这样的样式。

.row
{
    overflow: hidden;
    height: 100%;
}
.row .col-md-3,
.row .col-md-9 
{
    padding: 30px 3.15% 99999px; 
    float: left;
    margin-bottom: -99999px;
}
.row .col-md-3 p,
.row .col-md-9 p 
{
    margin-bottom: 30px;
}
.col-md-3
{
    background: pink;
    left:0;
    width:25%
}
.col-md-9
{
    width: 75%;
    background: yellow;
}

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

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

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

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

}

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

如果行后没有内容(全屏高度取)，使用位置的窍门:固定;高度:100%对于.col:before元素可以很好地工作:

header { background: green; height: 50px; } .col-xs-3 { background: pink; } .col-xs-3:before { background: pink; content: ' '; height: 100%; margin-left: -15px; /* compensates column's padding */ position: fixed; width: inherit; /* bootstrap column's width */ z-index: -1; /* puts behind content */ } .col-xs-9 { background: yellow; } .col-xs-9:before { background: yellow; content: ' '; height: 100%; margin-left: -15px; /* compensates column's padding */ position: fixed; width: inherit; /* bootstrap column's width */ z-index: -1; /* puts behind content */ } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <header>Header</header> <div class="container-fluid"> <div class="row"> <div class="col-xs-3">Navigation</div> <div class="col-xs-9">Content</div> </div> </div>

好的，我已经实现了同样的事情使用Bootstrap 3.0

带有最新引导的示例

http://jsfiddle.net/HDNQS/1/

HTML:

<div class="header">
    whatever
</div>
<div class="container-fluid wrapper">
    <div class="row">
        <div class="col-md-3 navigation"></div>
        <div class="col-md-9 content"></div>
    </div>
</div>

SCSS:

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

$headerHeight: 43px;

.navigation, .content {
    display: table-cell;
    float: none;
    vertical-align: top;
}

.wrapper {
    display: table;
    width: 100%;
    margin-top: -$headerHeight;
    padding-top: $headerHeight;
}

.header {
    height: $headerHeight;
}

.row {
    height: 100%;
    margin: 0;
    display: table-row;
    &:before, &:after {
        content: none;
    }
}

.navigation {
    background: #4a4d4e;
    padding-left: 0;
    padding-right: 0;
}