Bootstrap 4 - 全高[重复]答案

【问题标题】：Bootstrap 4 - Full height [duplicate]Bootstrap 4 - 全高[重复]
【发布时间】：2019-01-16 20:05:46
【问题描述】：

我知道有很多关于此的线程，但我尝试了其他线程的所有方法，但没有成功。

所以我目前在这里有这段代码：

<div class="container-fluid d-flex flex-column" style="height: 100vh;">
  <div class="row d-flex flex-column no-gutters">
    <app-top class="col"></app-top>

    <div class="row flex-row no-gutters" style="margin-top: 38px;">
      <app-left class="col flex-shrink-0"></app-left>

      <div class="col">
        <router-outlet></router-outlet>
      </div>

      <app-right class="col flex-shrink-0"></app-right>
    </div>
  </div>
</div>

内容并没有像我希望的那样延伸。顶部有一个导航栏，然后应该是三列，全高。

【问题讨论】：

里面能放点内容吗？
你需要使用flex-fill或flex-grow-1:codeply.com/go/wq0yGMndc8

标签： html css angular twitter-bootstrap bootstrap-4

【解决方案1】：

从 div 中移除样式 100vh 并为 100% 高度添加 bootstrap 4 类

<div class="h-100"></div>

【讨论】：

我不知道你为什么投了反对票，但这对我来说很完美。所以为你竖起大拇指。

【解决方案2】：

应该这样做。避免使用内联样式。

<div class="container-fluid h-100">

类似的答案在这里：Bootstrap 4, how to make a col have a height of 100%?

【讨论】：