Wenn Sie div
s an a div
mit einer festen Höhe anhängen , werden die untergeordneten Divs von oben nach unten angezeigt und bleiben am oberen Rand hängen.
┌─────────────────────────┐
│ Child Div 1 │
│ Child Div 2 │
│ │
│ │
│ │
└─────────────────────────┘
Ich versuche jetzt, sie wie folgt von unten nach oben anzuzeigen (am unteren Rand bleiben):
┌─────────────────────────┐
│ │
│ │
│ │
│ Child Div 1 │
│ Child Div 2 │
└─────────────────────────┘
┌─────────────────────────┐
│ │
│ │
│ Child Div 1 │
│ Child Div 2 │
│ Child Div 3 │
└─────────────────────────┘
┌───────────────────────┬─┐
│ Child Div 2 │▲│
│ Child Div 3 │ │
│ Child Div 4 │ │
│ Child Div 5 │█│
│ Child Div 6 │▼│
└───────────────────────┴─┘
Und so weiter ... Ich hoffe du verstehst was ich meine.
Ist das einfach mit CSS machbar vertical-align: bottom
? Oder muss ich etwas zusammen mit JavaScript hacken?
overflow-y:auto
für den Containerposition:absolute
.Eine modernere Antwort darauf wäre die Verwendung
flexbox
.Wie bei vielen anderen modernen Funktionen funktionieren sie in älteren Browsern nicht. Wenn Sie also nicht bereit sind, die Unterstützung für Browser aus der IE8-9-Ära aufzugeben, müssen Sie nach einer anderen Methode suchen.
So geht's:
Und das ist alles was du brauchst. Weitere Informationen
flexbox
finden Sie unter MDN .Hier ist ein Beispiel dafür mit einigen grundlegenden Stilen: http://codepen.io/Mest/pen/Gnbfk
quelle
Wir können einfach die CSS-Transformation verwenden, um dies zu archivieren.
Ich habe einen Codepen dafür erstellt. https://codepen.io/king-dev/pen/PoPgXEg
Die Idee ist, die Wurzel zuerst horizontal und dann die direkten untergeordneten Divs erneut umzudrehen.
HINWEIS: Die obige Methode kehrt auch die Reihenfolge der Divs um. Wenn Sie sie einfach so platzieren möchten, dass sie von unten beginnen, können Sie Folgendes tun.
quelle
Keepin 'it oldskool ...
Ich wollte dasselbe in einem
#header
Div machen, also habe ich ein leeres Div namens erstellt#headspace
und es oben auf den Stapel gelegt (innerhalb von#header
):Dann habe ich einen Prozentsatz für die Höhe des unsichtbaren
#headspace
Div verwendet , um die anderen nach unten zu drücken. Es ist einfach, die Entwickler- / Inspektor-Tools des Browsers zu verwenden, um dies genau richtig zu machen.quelle
div
angehängt wird, vollständig aktualisiert . Ich setze dies hier ein, falls jemand tatsächlich eine statischere Lösung wünscht. Mit anderen Worten: Ich denke, dass eine Nullabstimmung angemessener wäre als eine negative Abstimmung.Child Div #
bei dem die Anzahl der untergeordneten Divs zunimmt, und bei einer Erhöhung um eine bestimmte Höhe sollte ein Bildlauf angezeigt werden. Diese Antwort bietet also keine Lösung für die eigentliche Frage.Ich möchte, dass dies mit Bootstarp wie einer Chat-App funktioniert, bei der der Nachrichtenfluss von unten nach oben erfolgt
Nachdem ich etwas gelesen hatte, fand ich das
Ich habe eine äußere Div angenommen Klasse .outerDiv und dann UI, Liste
quelle
Dies ist einfach, wenn Sie verwenden
position: absolute
.http://jsfiddle.net/XHeZj/
quelle
quelle