Bootstrap 4，如何使Col的高度为100％? [英] Bootstrap 4, how to make a col have a height of 100%?

问题描述

如何使列占用浏览器4高度的浏览器的100％?

how can I make a column take up 100% height of the browser w bootstrap 4?

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

请注意，黄色的div，我需要这个div/列的高度为100％...是否有办法做到这一点，而不必使所有父div的高度都为100％?

Note the yellow div, I need this div/column to take up a height of 100%... Is there way to make this happen without having to make all parent div's have a height of 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>

推荐答案

将Bootstrap 4 h-100类用于height:100%;

Use the Bootstrap 4 h-100 class for 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％(或具有定义的身高)...

You'll also need ensure any parent(s) are also 100% height (or have a defined height)...

html,body {
  height: 100%;
}

注意:100％的高度与剩余"高度不同.

Note: 100% height is not the same as "remaining" height.

相关: 查看全文