Bootstrap：如何制作简单的全高布局？

Question

我正在尝试在引导程序中进行此布局

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

重要的一点是，顶部占据了96px的较大部分，占屏幕的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

百分比高度不是最佳选择。而是将容器设置为flexbox列（d-flex flex-column），然后flex-grow-1在要填充剩余高度的行上使用grow（）...

https://www.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>

另请参阅：如何使行拉伸剩余高度