web-dev-qa-db-fra.com

Bootstrap 4 rangée hauteur restante

J'ai du mal à étirer un rang pour combler le reste de la hauteur disponible. J'ai essayé d'ajouter h-100 à la classe row mais cela crée un espace blanc au bas de l'écran. Il doit y avoir un moyen de le faire mais je suis totalement perplexe. Voici mon code: 

<div class="container-fluid h-100">
  <div class="row justify-content-center h-100">
    <div class="col-4 bg-red">
      <div class="h-100">
        <div class="row justify-content-center bg-purple">
          <div class="text-white">
            <div style="height:200px">ROW 1</div>
          </div>
        </div>
        <div class="row justify-content-center bg-blue">
          <div class="text-white">ROW 2</div>
        </div>
      </div>
    </div>
    <div class="col-8 bg-gray"></div>
  </div>
</div>

codepen: https://codepen.io/ee92/pen/zjpjXW/?editors=1100

 enter image description here

J'aimerais que la rangée bleue (rangée 2) remplisse tout l'espace rouge. Aucune suggestion?

Merci

htmlcssgridbootstrap-4row
4
Egor

Utilisez le Bootstrap 4.1 flex-grow-1 class ...

https://codepen.io/anon/pen/RyQvmW?editors=1100

<div class="container-fluid h-100">
  <div class="row justify-content-center h-100">
    <div class="col-4 bg-red">
      <div class="h-100 d-flex flex-column">
        <div class="row justify-content-center bg-purple">
          <div class="text-white">
            <div style="height:200px">ROW 1</div>
          </div>
        </div>
        <div class="row justify-content-center bg-blue flex-grow-1">
          <div class="text-white">ROW 2</div>
        </div>
      </div>
    </div>
    <div class="col-8 bg-gray"></div>
  </div>
</div>

Connexes: Bootstrap 4: Comment faire pour que la ligne étire la hauteur restante?

9
Zim

Faites du conteneur une boîte flexible avec une direction de colonne (.d-flex.flex-column) et donnez à la ligne 2 la classe .col pour le développer verticalement:

<div class="container-fluid h-100">
  <div class="row justify-content-center h-100">
    <div class="col-4 bg-red">

      <!-- these classes here -->
      <div class="h-100 d-flex flex-column">
        <div class="row justify-content-center bg-purple">
          <div class="text-white">
            <div style="height:200px">ROW 1</div>
          </div>
        </div>

        <!-- adding col adds the style flex-grow: 1 -->
        <div class="row justify-content-center bg-blue col">

          <div class="text-white">ROW 2</div>
        </div>
      </div>
    </div>
    <div class="col-8 bg-gray"></div>
  </div>
</div>

Démo CodePen

0
Jonathan Lam