web-dev-qa-db-fra.com

Faire en sorte que la ligne occupe toute sa hauteur en Bootstrap 4

Je veux créer une grille Bootstrap dont la deuxième ligne occupe toute la hauteur de la page, d'une manière très similaire à Twitter bootstrap 3 deux colonnes pleine hauteur . Cependant, la réponse "non hacky" fournie, qui utilise Bootstrap 4's h-100, ne semble pas fonctionner. Voici le code et sa sortie:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="wiewport" content="width=device-width, initial-scale=1 user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <style>
    html {
        height: 100%;
    }
    body {
        min-height: 100%;
        background-color: lightblue;
    }
    main {
        background-color: yellow;
    }
    #second-row {
        background-color: green;
    }
    textarea {
        height: 100%;
        width: 100%;
    }
    </style>
  </head>
  <body>
      <main class="container-fluid h-100">
          <div class="row">
              <div class="col-sm-6">
                  Hello,
              </div>
              <div class="col-sm-6">
                  World!
              </div>
          </div>
          <div class="row h-100" id="second-row">
              <div class="col-sm-8">
                  <textarea></textarea>
              </div>
              <div class="col-sm-4">
                  <textarea></textarea>
              </div>
          </div>
      </main>
  </body>
</html>

Output of the code

Mise à jour: Bootstrap 4: Comment faire pour que la ligne étire la hauteur restante? , une question similaire, a une réponse qui utilise Bootstrap 4's flex-grow classe. Je l'ai essayé comme ça:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="wiewport" content="width=device-width, initial-scale=1 user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <style>
    html {
        height: 100%;
    }
    body {
        min-height: 100%;
        background-color: lightblue;
    }
    main {
        background-color: yellow;
    }
    #second-row {
        background-color: green;
    }
    textarea {
        height: 100%;
        width: 100%;
    }
    </style>
  </head>
  <body>
      <main class="container-fluid d-flex h-100 flex-column">
          <div class="row">
              <div class="col-sm-6">
                  Hello,
              </div>
              <div class="col-sm-6">
                  World!
              </div>
          </div>
          <div class="row flex-fill d-flex justify-content-start" id="second-row">
              <div class="col-sm-8 portlet-container portlet-dropzone">
                  <textarea></textarea>
              </div>
              <div class="col-sm-4 portlet-container portlet-dropzone">
                  <textarea></textarea>
              </div>
          </div>
      </main>
  </body>
</html>

La production reste inchangée.

htmlcsstwitter-bootstrapbootstrap-4
6
Lucca

Tu devrais utiliser flex-grow:1; comme expliqué dans l'autre réponse: Bootstrap 4: Comment faire pour étirer la ligne de hauteur restante?

Le problème est que le corps doit être height:100%; ne pas min-height...

<main class="container-fluid d-flex h-100 flex-column">
  <div class="row">
      <div class="col-sm-6">
          Hello,
      </div>
      <div class="col-sm-6">
          World!
      </div>
  </div>
  <div class="row flex-grow-1" id="second-row">
      <div class="col-sm-8 portlet-container portlet-dropzone">
          <textarea></textarea>
      </div>
      <div class="col-sm-4 portlet-container portlet-dropzone">
          <textarea></textarea>
      </div>
  </div>
</main>

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

6
Zim