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

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

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

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

.col-md-3 {
    padding-bottom: 100%;
    margin-bottom: -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>

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

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解决方案

工作小提琴

仅使用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)

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

.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>