Bootstrap 3两列全高

Question

我试图用Twitter Bootstrap 3制作一个两列全高布局。Twitter Bootstrap 3似乎不支持全高度布局。我想做的事：

  +-------------------------------------------------+
  |                     Header                      |
  +------------+------------------------------------+
  |            |                                    |
  |            |                                    |
  |Navigation  |         Content                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  +------------+------------------------------------+

如果内容增长，nav也应该增长。

• 每个家长的身高100%不起作用，因为有一种情况，内容是一行。
• 位置：绝对似乎是错误的方式。
• 显示：table和显示：table-cell解决了这个问题，但并不优雅。

    <div class="container">
      <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-9"></div>
      </div>
    </div>

有没有办法使用默认的TwitterBootstrap3类？

Answer 1

工作小提琴

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

说明：容器div占据了身体100%的高度，他被分成两部分。收割台部分将延伸至所需高度，其余部分将由HeightTaker承担。它是如何实现的？通过沿容器一侧以100%的高度浮动一个空元素（使用：before），并在HeightTaker的末尾使用明确的规则（使用：after）给一个空元素。这个元素不能和浮动元素在同一条线上，所以他被推到了最后。这正是文档的100%。

因此，我们使高度测量器跨越集装箱的其余高度，而不说明任何具体高度/边距。

在这个HeightTaker中，我们构建了一个普通的浮动布局（以实现类似于列的显示），只需稍加修改。。我们有一个Wrapper元素，它是100%高度工作所必需的。

下面是引导类的演示。（我刚刚在布局中添加了一个div）

Answer 2

你可以实现你想要的与padding-down： 100%； meading-down：-100%；技巧，有你可以看到在这个小提琴。

我稍微改变了你的超文本标记语言，但是你可以用下面的代码用你自己的超文本标记语言达到同样的结果

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

.col-md-3 {
    padding-bottom: 100%;
    margin-bottom: -100%;
}

Answer 3

编辑：在Bootstrap4中，本机类可以生成全高列（演示），因为它们将网格系统更改为flexbox。（请继续阅读引导3）

Bootply演示/代码笔

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

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表属性），对于中等屏幕宽度和更高的屏幕，其比率为1:3（导航：内容）（由于bootstrap的默认类：col-md-3和col-md-9）

NB：

1）为了不搞砸bootstrap的本机列类，我们在标记中添加了另一个类，如no-浮动，并且只在这个类上设置show： table-cell和浮动：无（与列类本身相对）。

2） 如果我们只想将css表代码用于特定断点（例如中等屏幕宽度及以上），但对于移动屏幕，我们希望默认回到通常的引导行为，而不是将自定义css包装到媒体查询中，例如：

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

现在，对于较小的屏幕，列的行为将类似于默认引导列（每个列都具有全宽）。

3）如果1:3的比例对于所有屏幕宽度都是必要的-那么最好从标记中删除bootstrap的col-md-*类，因为它们不应该这样使用。