Podczas dodawania div
s do a div
o stałej wysokości, podrzędne elementy DIV będą pojawiać się od góry do dołu, przyklejając się do górnej krawędzi.
┌─────────────────────────┐
│ Child Div 1 │
│ Child Div 2 │
│ │
│ │
│ │
└─────────────────────────┘
Teraz próbuję wyświetlić je od dołu do góry w ten sposób (przyklejając się do dolnej krawędzi):
┌─────────────────────────┐
│ │
│ │
│ │
│ 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 │▼│
└───────────────────────┴─┘
I tak dalej ... Mam nadzieję, że rozumiesz, o co mi chodzi.
Czy jest to po prostu wykonalne za pomocą CSS (coś w rodzaju vertical-align: bottom
)? A może muszę coś zhakować razem z JavaScriptem?
overflow-y:auto
dla konteneraposition:absolute
podrzędny nie ma wpływu na wysokość kontenera .Bardziej nowoczesną odpowiedzią na to byłoby użycie
flexbox
.Podobnie jak w przypadku wielu innych nowoczesnych funkcji, nie będą działać w starszych przeglądarkach , więc jeśli nie jesteś gotowy do rezygnacji z obsługi przeglądarek z ery IE8-9, będziesz musiał poszukać innej metody.
Oto jak to się robi:
I to wszystko, czego potrzebujesz. Więcej informacji można
flexbox
znaleźć w MDN .Oto przykład tego z podstawowymi stylami: http://codepen.io/Mest/pen/Gnbfk
źródło
Możemy po prostu użyć transformacji CSS, aby to zarchiwizować.
Stworzyłem do tego codepen. https://codepen.io/king-dev/pen/PoPgXEg
Chodzi o to, aby najpierw odwrócić pierwiastek w poziomie, a następnie ponownie odwrócić bezpośrednie potomne elementy div.
UWAGA: powyższa metoda również odwraca kolejność elementów div. Jeśli chcesz po prostu umieścić je na początku od dołu, możesz wykonać następujące czynności.
źródło
Keepin 'it oldskool ...
Chciałem zrobić to samo w
#header
elemencie div, więc utworzyłem pusty element div o nazwie#headspace
i umieściłem go na szczycie stosu (wewnątrz#header
):Następnie użyłem wartości procentowej jako wysokości niewidocznego elementu
#headspace
div , aby wypchnąć pozostałe w dół. Łatwo jest użyć narzędzi programisty / inspektora przeglądarki, aby zrobić to dobrze.źródło
div
jest dodawany. Więc umieściłem to tutaj na wypadek, gdyby ktoś faktycznie chciał bardziej statycznego rozwiązania. Innymi słowy: uważam, że głosowanie zerowe byłoby bardziej odpowiednie niż głosowanie przeciw.Child Div #
gdzie podrzędne elementy div rosną, a po zwiększeniu o określoną wysokość powinno zostać pokazane przewijanie. więc ta odpowiedź nie zapewnia rozwiązania rzeczywistego pytania.Chcę, aby ta praca z bootstarpem była jak aplikacja do czatowania, w której wiadomości płyną od dołu do góry
po przeczytaniu rzeczy znalazłem to
Mam zewnętrzny div zakładaj klasę .outerDiv, a następnie UI, list
źródło
Jest to proste, gdy używasz
position: absolute
.http://jsfiddle.net/XHeZj/
źródło
źródło