Bootstrap 4, mach Listengruppe rollbar, in einer Reihe, mit Flexbox, mit oder ohne Body Scroll
Ich benutze Bootstrap 4 (jetzt bin ich auf Alpha-6).
Ich habe diese Situation:
%Vor%Dies ist das CSS :
%Vor%Es gibt eine DEMO auf PLNKR : Ссылка
Ich brauche die Fußzeile, wenn der Seiteninhalt leer ist. Aus diesem Grund verwende ich: .bigone { height: 100vh; } und Bootstrap Flexbox align Dienstprogramme wie: <div class="bigone d-flex flex-column">
Jetzt brauche ich die list-group in card und die col-6 mit "so vielen Wörtern", um scrollbar zu sein, also um eine Höhe für beide maximal bis zum unteren Ende der Fußzeile zu haben.
Kurz gesagt: BODY darf keine Bildlaufleiste haben .
Meine Kopf- und Fußzeilenhöhe sind nicht festgelegt, sie ändern sich.
Wie? Ich bin kein Flexbox-Experte.
Ich brauche keinen IE, nur Chrome.
WICHTIG :
Ich kann meine Kartenhöhe nicht mit etwas wie diesem festlegen:
%Vor%weil meine Kopf-, Fußzeilen-, usw. Höhen sich dynamisch ändern.
Bild des Problems :
3 Antworten
Gemäß der Spezifikation muss die Einstellung flex: 1 (auf .main element) ist äquivalent zu flex: 1 1 0 , Kurzschrift 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 Chrome ein, auf Ihre Frage).
Wenn Sie jedoch .main die vollständige Kurzschrift geben - und es zu einem flexiblen Container machen und overflow hinzufügen - scheint Ihr Layout zu funktionieren.
Referenz:
BEARBEITEN (basierend auf Änderungen an der Frage)
Meine obige Antwort entfernt Bildlaufleisten von body und bietet eine vertikale Bildlaufleiste für den Abschnitt .main .
Um vertikale Bildlaufleisten für jede Spalte im Abschnitt .main verfügbar zu machen, nehmen Sie folgende Einstellung vor:
Erstellt einen neuen Plunker, um zu zeigen, wonach Sie suchen.
Um die Fußzeile unten zu behalten, verwenden Sie Bootstrap Flexbox Auto Margins .
> Wenn Sie den Hauptinhalt innerhalb der ursprünglichen Ansichtsfensterhöhe halten möchten, verwenden Sie die flex-grow:1 -Eigenschaft mit overflow-y:scroll . Seine Höhe wird in Abhängigkeit von dem Raum, den die anderen Elemente benutzen, entsprechend angepasst.
Ich hoffe, das hat geholfen.
Tags und Links css twitter-bootstrap twitter-bootstrap-3 flexbox bootstrap-4