你可以达到你想要的填充底部: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; }
}

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

如果行后没有内容(全屏高度取)，使用位置的窍门:固定;高度: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;
}

编辑: 在Bootstrap 4中，本地类可以生成全高列(DEMO)，因为它们将网格系统更改为flexbox。(请继续阅读Bootstrap 3) 原生Bootstrap 3.0类不支持你描述的布局，但是，我们可以集成一些自定义CSS，利用CSS表来实现这一点。

Bootply demo / Codepen

标记:

<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">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*/
    box-sizing: border-box;
}

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

.row .no-float {
  display: table-cell;
  float: none;
}

上面的代码将实现全高的列(由于我们添加了自定义css-table属性)和比例为1:3(导航:内容)的中等屏幕宽度和以上-(由于bootstrap的默认类:col-md-3和col-md-9)

NB:

1)为了不搞乱bootstrap的原生列类，我们在标记中添加了另一个类，比如no-float，并且只在这个类上设置display:table-cell和float:none(与列类本身相反)。

2)如果我们只想对特定的断点(比如中等屏幕宽度以上)使用CSS -table代码，但对于移动屏幕，我们想默认回到通常的引导行为，而不是我们可以在媒体查询中包装我们的自定义CSS，说:

@media (min-width: 992px) {
  .row .no-float {
      display: table-cell;
      float: none;
  }
}

Codepen演示

现在，对于较小的屏幕，列将表现为默认的引导列(每个都获得全宽度)。

3)如果所有屏幕宽度都需要1:3的比例，那么从标记中删除bootstrap的col-md-*类可能会更好，因为这不是它们应该被使用的方式。

Codepen演示

这里没有提到抵消。

您可以使用绝对来定位左侧侧栏。

CSS

.sidebar-fixed{
  width: 16.66666667%;
  height: 100%;
}

HTML

<div class="row">
  <div class="sidebar-fixed">
    Side Bar
  </div>
  <div class="col-md-10 col-md-offset-2">
    CONTENT
  </div>
</div>