twitter-bootstrap-3 - Bootstrap 布局全屏 2 行

Question

在 bootstrap 3 中，如何创建一个布局来填满整个屏幕(100% 高度)并包含如下 2 行(每行 50% 高度)？ View 不应滚动。谢谢你的帮助

我已开始使用此标记，但无法获得我需要的结果:

<div class="container-fluid">
    <div class="row-fluid">
        <div class="col-lg-12">Top</div>
    </div>
    <div class="row-fluid">
        <div class="col-lg-4">Bottem Left</div>
        <div class="col-lg-4">Bottom Center</div>
        <div class="col-lg-4">Bottom Right</div>
    </div>
</div>

Answer 1

Bootstrap 不提供执行 100% 高度布局的机制。您将需要一些自定义 CSS。

这是一种方法。您的问题留下了一些 Unresolved 问题，例如在溢出情况下应该发生什么。

.row > div {
    overflow-y: scroll;
    height: 100%;
}
.row.one-third {
    height: 33.333%;
}
.row.two-thirds {
    height: 66.667%;
}

Demo

Here it is 再次使用 50% 的高度。