Twitter bootstrap 引导：如何制作一个简单的全高布局？

我正试图在bootstrap中创建此布局

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

一个重要的部分是，顶部部分占据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%，我获得了一些成功，但我确信有更好的方法。

您是否尝试过引导中的

h-

调整助手类的大小

见：

例如：

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

顶杆
左下角
右下角

百分比高度不是最佳选择。相反，将容器设为flexbox列（

d-flex-flex-column

），然后在要填充剩余高度的行上使用grow（

flex-grow-1

）

顶杆
左下角
右下角

另请参见：

HTML:

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

.top-bar {
    height: max(96px, 20%);
}

.bottom-part {
    height: calc(100% - max(96px, 20%));
}

---

说明：计算多个给定值的最大值。底部零件使用计算100%的高度减去顶部杆的高度，从而得到正确的高度

它在你的链接中看起来很棒，出于某种原因，我丢失了你代码的顶部栏，现在只有三列。编辑：当我只使用你的代码时，它看起来也很好，我会用你的代码作为模板，一次重建一个标签，直到有东西坏掉。谢谢你的帮助！

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

.top-bar {
    height: max(96px, 20%);
}

.bottom-part {
    height: calc(100% - max(96px, 20%));
}