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>

- JonoB

---

听起来你需要设置 min-height 而不是 height，这样第一列将至少达到100% - 最小值100%。 - zgood

Answer 1

自从Bootstrap 4使用flexbox后，列高度是相等的，但是您正在使用的h-100在内容高于视口时会限制高度。

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

<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

无需为html、body或黄色div设置高度的额外CSS。 当内容较少（低于视口高度）时，这也可以使用：https://www.codeply.com/go/xdkXsLWRJt

- Zim

Answer 2

请使用flexbox来实现此功能。

.row {
  display: flex; /* equal height of the children */
  min-height: 100vh;
}

.col {
  flex: 1; /* additionally, equal width */
  padding: 1em;
  border: solid;
}
.bg-yellow {
  background: yellow;
}

<div class="row">
  <div class="col bg-yellow">
    XXXX
  </div>
  <div class="col">
    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>

- EnzoTrompeneers

---

Bootstrap的.row是display:flex，但当内容很少时，它将无法填充视口高度。 - Carol Skelly

@Zim 在类上加上 .row min-height: 100vh; 但他已经有了这个？ - EnzoTrompeneers

我没有看到他设置了最小高度。 - Carol Skelly