Bootstrap 4, comment faire un col, d'une hauteur de 100%?

comment puis-je faire une colonne de prendre jusqu'à 100% de la hauteur du navigateur w bootstrap 4?

Voir la suivante: https://codepen.io/johnpickly/pen/dRqxjV

Note le jaune div, j'ai besoin de cette div/colonne à prendre jusqu'à une hauteur de 100%... Est-il moyen de faire cela sans avoir à faire tous les div parent ont une hauteur de 100%?

Merci

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>
Je suis en supposant que vous avez spécifié quelque part: <div class="col-sm-2 hidden-lg-up hidden-xs-down"></div>?

OriginalL'auteur AnnaSm | 2017-07-08

  1. 38

    Utiliser le Bootstrap 4 h-100 classe pour 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

    Vous aurez également besoin de s'assurer que toutes les parent(s) sont également 100% de la hauteur (ou la définition d'une hauteur)...

    html,body {
  height: 100%;
}

    Note: 100% de la hauteur n'est pas le même que le "reste" de hauteur.

    Connexes: Bootstrap 4: Comment faire de la ligne tronçon restant de la hauteur?

    Cela ne fonctionne pas si le contenu du col est plus grand que 100% de la hauteur comme une forme longue.
    Ouais, dans ce cas, vous auriez min-hauteur de la place: codeply.com/go/MjGkqFWmA1

    OriginalL'auteur Zim

  2. 3

    J'ai essayé plus d'une demi-douzaine de solutions proposées sur Stack Overflow, et la seule chose qui a fonctionné pour moi:

    <div class="row" style="display: flex; flex-wrap: wrap">
    <div class="col-md-6">
        Column A
    </div>
    <div class="col-md-6">
        Column B
    </div>
</div>

    J'ai eu la solution à partir de https://codepen.io/ondrejsvestka/pen/gWPpPo

    Noter qu'il semble nuire à la colonne des marges. J'ai dû appliquer des réglages à ceux-ci.

    Malheureusement, je viens de découvrir que ce qui provoque les colonnes d'empiler verticalement dans Safari. En laissant ce ici au cas où quelqu'un sait comment résoudre ce problème.

    OriginalL'auteur Derrick Miller

  3. 1

    Ensemble display: table pour div parent et display: table-cell pour enfants divs

    HTML : 

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

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

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

    CSS: 

    #yellow {
  height: 100%;
  background: yellow;
  width: 50%;
}
#red {background: red}

.container-fluid {bacgkround: #ccc}

/* this is the part make equal height */
.display-as-table {display: table; width: 100%;}
.display-as-table > div {display: table-cell; float: none;}

    OriginalL'auteur Alan Yong