Bootstrap 4 ligne de remplissage restant hauteur

J'ai du mal à faire la une ligne étirer pour remplir le reste de la hauteur disponible. J'ai essayé d'ajouter h-100 à la ligne de la classe mais qui provoque l'espace blanc en 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

Bootstrap 4 ligne de remplissage restant hauteur

Je voudrais faire le la ligne bleue (LIGNE 2) remplir tous les rouges de l'espace. Des suggestions?

Grâce

InformationsquelleAutor Egor | 2018-05-09
  1. 14

    Utiliser le Bootstrap 4.1 flex-grow-1 classe...

    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 de la ligne tronçon restant de la hauteur?

    • Tout c'est très bien jusqu'à ce que le texte de la première ligne de départ à croître et à se cacher sous la deuxième rangée.. codepen.io/anon/pen/maVoKy :/
    • déposer les height:200px sur la première ligne...
    • Avez-Vous regardé exemple je attaché? De toute façon dans mon cas, le réglage de hauteur fixe n'est pas une option..
    • Quel navigateur utilisez-vous? Dans chrome, votre première ligne dépasse la hauteur de l'écran pour moi, mais il n'est pas "cacher" en vertu de la deuxième ligne, au lieu qu'il pousse la deuxième rangée hors de l'écran. Sur Safari, il se cache en dessous de la deuxième ligne, qui se sent de plus approprié que de ce que chrome ne. Quels sont exactement ce que vous cherchez à atteindre? Moi aussi, je ne voulais pas de hauteur fixe, mais je savais qu'il était assez petit pour que ça colle à l'intérieur de mon attendus hauteur minimale. Je pense que dans ce domaine du problème que vous avez une ligne vous savez est "petit" et puis l'autre devrait l'étendre à l'espace restant. Ce n'est pas ce que vous voulez?
    • comme ROW 1 a une hauteur fixe dans cette réponse, il ne devrait pas croître, mais le contenu devrait débordement à droite ou en bas.
    • Je comprends. J'ai enlevé la hauteur fixe à partir de la ligne 1 dans mon utilisation, parce que je voulais deux rangées de consommer l'intégralité de l'espace, mais la première ligne à être minime. Il sonnait comme m1l05z voulu le même. C'était peut-être pas la meilleure solution pour mon problème, mais c'est ce que j'ai trouvé =).

    InformationsquelleAutor Zim