Bootstrap 4最大高度div

Question

我有一个 2 列布局，其中第一列将是垂直导航，右列将用于内容。

我希望第一列至少为视口大小的 100%，但如果主要内容大于视口，则它需要增长。

如何使第一列（黄色）与第二列的高度相同？

html,body {
  height: 100%;
}

#yellow {
  height: 100%;
  background: yellow;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid h-100">
  <div class="row h-100">
    <div class="col-3 h-100" id="yellow">
      XXXX
    </div>
    <div class="col-9 h-100">
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      
    </div>
  </div>
</div>

Answer 1

由于 Bootstrap 4 使用 Flexbox，列的高度相等，但是h-100当内容高于视口时，您使用的会限制高度。

只需使用min-vh-100黄色 div 上的类即可。

<div class="container-fluid">
  <div class="row">
    <div class="col-3 min-vh-100" id="yellow">
      XXXX
    </div>
    <div class="col-9">
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
    </div>
  </div>
</div>

演示： https: //www.codeply.com/go/K7T1fXEl5p

您不需要额外的 CSS来设置html,body或 黄色 div 的高度。当内容较少（视口高度较短）时，这也将起作用：https ://www.codeply.com/go/xdkXsLWRJt