如何使 Bootstrap 4 列的高度为 100%？

Question

如何让一列占据浏览器 w bootstrap 4 的 100% 高度？

请参阅以下内容： https ://codepen.io/johnpickly/pen/dRqxjV

注意黄色的 div，我需要这个 div/column 占据 100% 的高度……有没有办法做到这一点而不必让所有父 div 的高度为 100%？

谢谢

html:

 <div class="container-fluid">
  <div class="row justify-content-center">

    <div class="col-4 hidden-md-down" id="yellow">
      XXXX
    </div>

    <div class="col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8">
      Form Goes Here
    </div>
  </div>
</div>

原文由 AnnaSm 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 Bootstrap 4 h-100 类为 height:100%;

 <div class="container-fluid h-100">
  <div class="row justify-content-center h-100">
    <div class="col-4 hidden-md-down" id="yellow">
      XXXX
    </div>
    <div class="col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8">
      Form Goes Here
    </div>
  </div>
</div>

https://www.codeply.com/go/zxd6oN1yWp

您还需要确保任何父母也是 100% 的高度（或具有定义的高度）…

 html,body {
  height: 100%;
}

注意：100% 高度与“剩余”高度不同。

---

相关： Bootstrap 4：如何使行拉伸剩余高度？

原文由 Zim 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用引导类 vh-100

对于 exp：

    <div class="vh-100">
       <p> Full Height </p>
   </div>

原文由 Sandeep Sherpur 发布，翻译遵循 CC BY-SA 4.0 许可协议