据我所知，你可以使用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;
}

好的，我已经实现了同样的事情使用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;
}

我考虑了一个微妙的改变，它不会改变默认的引导行为。 我只能在需要的时候使用它:

.table-container {
  display: table;
}

.table-container .table-row {
  height: 100%;
  display: table-row;
}

.table-container .table-row .table-col {
  display: table-cell;
  float: none;
  vertical-align: top;
}

所以我可以这样使用它:

<div class="container table-container">
  <div class="row table-row">
    <div class="col-lg-4 table-col"> ... </div>
    <div class="col-lg-4 table-col"> ... </div>
    <div class="col-lg-4 table-col"> ... </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;
}

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

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

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

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

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

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

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