web-dev-qa-db-fra.com

Bootstrap 4, faire défiler un groupe de listes, de manière consécutive, avec flexbox, avec ou sans corps

J'utilise Bootstrap 4 (maintenant je suis sur alpha-6).

J'ai cette situation:

<body>

  <!-- HERE I HAVE one div automatically generated with randomly ID and class -->

  <div class="bigone">

    <div class="container-fluid">

      <div class="header">
        My header
      </div>

    </div>

    <div class="mybar">
      Nav bar
    </div>

    <div class="main">
      <div class="container-fluid">
        <div class="row">

          <div class="col-6">
            <div class="card">
              <div class="card-header">
                Card Header
              </div>
              <div class="list-group list-group-flush">
                <a href="#" class="list-group-item list-group-item-action"><b>FIRST LINK</b></a>
                <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>                    
                <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
                <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>

                <a href="#" class="list-group-item list-group-item-action disabled"><b>LAST LINK</b></a>
              </div>
              <div class="card-footer">
                Card Footer
              </div>
            </div>
          </div>

          <div class="col-6">
            <h1>FIRST LINE</h1> So many words, so many words. So many words, so many words. So many words, so many words.
            <br> So many words, so many words. So many words, so many words. So many words, so many words.
            <br> So many words, so many words. So many words, so many words. So many words, so many words.
            <br>
            <h1>LAST LINE</h1>
          </div>

        </div>
      </div>
    </div>

    <div class="footer">
      Footer
    </div>

  </div>

  <!-- HERE THAT DIV CLOSED -->

</body>

C'est le css:

.bigone {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.main {
  flex: 1;
}

Il y a un DEMO sur plnkr: https://plnkr.co/edit/Q9PQIj8uDFY80bxJGks3

J'ai besoin que le pied de page soit en bas lorsque le contenu de la page est vide, pour cette raison, j'utilise: .bigone { height: 100vh; } et des utilitaires d'alignement Bootstrap Flexbox tels que: <div class="bigone d-flex flex-column">

Maintenant, j'ai besoin du list-group dans card et du col-6 avec "tant de mots" pour pouvoir défiler, afin d'avoir une hauteur pour les deux maximum jusqu'au fond où se trouve le pied de page.

En résumé: BODY ne doit pas avoir la barre de défilement.

La hauteur de mon en-tête et de mon pied de page n'est pas fixe, elle change.

Comment? Je ne suis pas un expert en flexbox.

Je n'ai pas besoin d'IE, juste de Chrome.

IMPORTANT:

Je ne peux pas régler la hauteur de ma carte avec quelque chose comme ceci:

height: calc(100vh - header.height - footer.height - etc...);

parce que mes hauteurs d'en-tête, de pied de page, etc. changent de manière dynamique.

Image du problème:

 WHAT I NEED

csstwitter-bootstraptwitter-bootstrap-3flexboxbootstrap-4
9
user4412054

Selon spec , le paramètre flex: 1 (sur l'élément .main) est équivalent à flex: 1 1 0, en abrégé pour:

  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: 0

Cependant, pour une raison quelconque, flex: 1 ne fonctionne pas comme prévu dans votre code. (Je vérifie seulement dans Chrome, par votre question).

Toutefois, si vous donnez à .main l'intégralité du raccourci - et en faites un conteneur flexible et ajoutez overflow - votre présentation semble fonctionner.

.main {
    flex: 1 1 0; /* flex: 1, which you had before, is equivalent but doesn't work */
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}

plunkr révisé

Référence:

EDIT (basé sur les modifications apportées à la question)

Ma réponse ci-dessus supprime les barres de défilement de la body et fournit une barre de défilement verticale pour la section .main.

Pour rendre les barres de défilement verticales disponibles pour chaque colonne de la section .main, procédez comme suit:

.main {
    flex: 1 1 0;
    display: flex;
}
.container-fluid {
    display: flex;
}
.col-6 {
    overflow-y: auto;
}

plunkr révisé

4
Michael_B

J'ai 

<div class="fixed-top collapse show wrapper">
 <ul class="list-group bg-white menu">
 </ul>
</div>

Je l'ai réparé par

.wrapper {
    margin-top: 48px; /* place it under navbar */
    height: 100vh;
    overflow: scroll;
    padding-bottom: 48px; /* compensate margin top */
}
0
luky