twitter-bootstrap - Bootstrap : How to make a simple full height layout?

Question

我正在尝试在 Bootstrap 中进行此布局

--------------------------------------------
|                                          |
|                                          |
--------------------------------------------
|      |                                   |
|      |                                   |
|      |                                   |
|      |                                   |
|      |                                   |
|      |                                   |
|      |                                   |
|      |                                   |
|      |                                   |
--------------------------------------------

一个重要的部分是顶部占据屏幕的 96 像素和 20% 中较大的部分，而底部应该占据屏幕的其余部分。

虽然网格系统在操纵列宽方面给了我很大的力量，但我很难找到如何对行高做同样的事情。

这是我目前的结构:

<div class="container-fluid" style="height: 100vh">
    <div class="row">
        <div class="col">
            Top Bar
        </div>
    </div>
    <div class="row">
        <div class="col-md-2">
            Bottom Left
        </div>
        <div class="col-md-10">
            Bottom Right
        </div>
    </div>
</div>

它看起来像这样:

--------------------------------------------
|                                          |
|                                          |
--------------------------------------------
|      |                                   |
|      |                                   |
--------------------------------------------

在手机上看起来不错，但在桌面上完全被压扁了。

通过将第二行 div 设置为 height = 80%，我取得了一些成功，但我确信有更好的方法。

Answer 1

百分比高度不是最佳选择。相反，将容器设为 弹性盒 列 ( d-flex flex-column )，然后在要 的行上使用增长 ( flex-grow-1 )填充剩余高度 ...
https://codeply.com/go/jCIuhHCvHW

<div class="container-fluid min-vh-100 d-flex flex-column">
    <div class="row">
        <div class="col">
            Top Bar
        </div>
    </div>
    <div class="row flex-grow-1">
        <div class="col-md-2 border">
            Bottom Left
        </div>
        <div class="col-md-10 border">
            Bottom Right
        </div>
    </div>
</div>

另见: How to make the row stretch remaining height