我试图用Twitter Bootstrap 3做一个两列全高布局。Twitter Bootstrap 3似乎不支持全高布局。
我想做的是:
+-------------------------------------------------+
| Header |
+------------+------------------------------------+
| | |
| | |
|Navigation | Content |
| | |
| | |
| | |
| | |
| | |
| | |
+------------+------------------------------------+
如果内容增长，导航也应该增长。
高度100%为每个父级是行不通的，因为有些情况下内容是一行。
立场:绝对似乎是错误的方式。
Display: table和Display: table-cell解决了这个问题，但不够优雅。
HTML:
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-9"></div>
</div>
</div>
有办法使它与默认的推特引导3类?
纯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)
编辑:
在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演示
