it-swarm.com.de

Bootstrap 4, Listengruppe rollbar machen, in einer Reihe, mit Flexbox, mit oder ohne Body Scroll

Ich benutze Bootstrap 4 (jetzt bin ich auf Alpha-6).

Ich habe diese 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>

Dies ist das css:

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

.main {
  flex: 1;
}

Es gibt ein DEMO auf plnkr: https://plnkr.co/edit/Q9PQIj8uDFY80bxJGks3

Ich brauche eine Fußzeile, wenn der Seiteninhalt leer ist. Aus diesem Grund verwende ich: .bigone { height: 100vh; } und Bootstrap Flexbox-Ausrichtungsprogramme wie: <div class="bigone d-flex flex-column">

Jetzt brauche ich den list-group in card und den col-6 mit "so vielen Wörtern", um scrollbar zu sein, um eine Höhe für beide max nach unten zu haben, wo sich die Fußzeile befindet.

Kurz gesagt: BODY darf keine Bildlaufleiste haben.

Meine Kopf- und Fußhöhe sind nicht festgelegt, sie ändern sich.

Wie man? Ich bin kein Flexbox-Experte.

Ich brauche kein IE, nur Chrome.

WICHTIG:

Ich kann meine Kartenhöhe nicht mit so etwas fixieren:

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

da sich meine Kopf-, Fuß- und andere Höhen dynamisch ändern.

Problembild:

 WHAT I NEED

9
user4412054

Die Einstellung flex: 1 (für das .main-Element) entspricht laut specflex: 1 1 0, Kurzform für:

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

Aus irgendeinem Grund funktioniert flex: 1 jedoch nicht wie erwartet in Ihrem Code. (Ich checke nur in Chrome ein, je nach Ihrer Frage).

Wenn Sie jedoch .main die vollständige Abkürzung angeben und einen Flex-Container erstellen und overflow hinzufügen, scheint Ihr Layout zu funktionieren.

.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;
}

revised plunkr

Referenz:


EDIT (basierend auf Änderungen an der Frage)

Meine Antwort oben entfernt Bildlaufleisten aus der Variable body und stellt eine vertikale Bildlaufleiste für den Abschnitt .main bereit.

Nehmen Sie die folgenden Einstellungen vor, um vertikale Bildlaufleisten für jede Spalte im Abschnitt .main verfügbar zu machen:

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

revised plunkr

4
Michael_B

Ich habe 

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

Ich habe das Problem behoben

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