Twitter bootstrap 3两列全高

Question

我正在尝试使用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>有没有办法使用默认的twitter bootstrap 3类？

Answer 1

你可以通过这个padding-bottom: 100%; margin-bottom: -100%;技巧实现你想要的东西，你可以在这个小提琴中看到。

我稍微改变了你的HTML，但你可以使用以下代码用自己的HTML实现相同的结果

.col-md-9 {

    overflow: hidden;

}

.col-md-3 {

    padding-bottom: 100%;

    margin-bottom: -100%;

}

Answer 2

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

说明： 容器div占据身体的100％高度，并分为2个部分。标题部分将跨越其所需的高度，HeightTaker其余部分将采用。它是如何实现的？通过在容器旁边以100％高度（使用:before）浮动一个空元素，并HeightTaker在末尾给出一个空元素和清除规则（使用:after）。那个元素与浮动元素不在同一条线上，所以他被推到了最后。这正是文件的100％。

由此我们将HeightTaker跨度设置为容器高度的其余部分，而没有说明任何特定的高度/边距。

在内部，HeightTaker我们构建一个正常的浮动布局（以实现像显示一样的列），并进行微小的更改..我们有一个Wrapper元素，这是100%高度工作所需要的。

更新

这是使用Bootstrap类的Demo。（我刚给你的布局添加了一个div）