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

【问题标题】：Bootstrap: How to make a simple full height layout?Bootstrap：如何制作简单的全高布局？
【发布时间】：2019-12-24 17:04:01
【问题描述】：

我正在尝试在引导程序中制作此布局

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

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

【问题讨论】：

标签： twitter-bootstrap bootstrap-4

【解决方案1】：

您是否尝试过 Bootstrap 中的 h- 调整大小帮助程序类？

见：https://getbootstrap.com/docs/4.0/utilities/sizing/

例如：

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

【讨论】：

【解决方案2】：

百分比高度不是最佳选择。相反，将容器设为 flexbox 列 (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

【讨论】：

在您的链接中看起来很棒，由于某种原因，我丢失了带有您的代码的顶部栏，现在它只有三列。编辑：当我只使用您的代码时，它看起来也很好，我将使用您的代码作为模板一次重建我的原始网页一个标签，直到出现问题。感谢您的帮助！

【解决方案3】：

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>

CSS：

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

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

解释：CSS max function 计算几个给定值的最大值。底部使用CSS calc function 计算顶部栏高度减去 100% 的高度，得出正确的高度。

【讨论】：