Menumpuk Div ​​dari Bawah ke Atas


143

Saat menambahkan divs ke a divdengan ketinggian tetap, div turunan akan muncul dari atas ke bawah, menempel di batas atas.

┌─────────────────────────┐
 Child Div 1             
 Child Div 2             
                         
                         
                         
└─────────────────────────┘

Saya sekarang mencoba menampilkannya dari bawah ke atas seperti ini (menempel di tepi bawah):

┌─────────────────────────┐
                         
                         
                         
 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           │▼│
└───────────────────────┴─┘

Dan seterusnya ... Saya harap Anda mengerti maksud saya.

Apakah ini dapat dilakukan dengan CSS (seperti vertical-align: bottom)? Atau apakah saya harus meretas sesuatu bersama-sama dengan JavaScript?

Jawaban:


47

Semua jawaban melewatkan titik scrollbar pertanyaan Anda. Dan itu yang sulit. Jika Anda hanya membutuhkan ini untuk bekerja pada browser modern dan IE 8+, Anda dapat menggunakan pemosisian tabel, vertical-align:bottomdan max-height. Lihat MDN untuk kompatibilitas browser tertentu.

Demo (rata vertikal)

.wrapper {
  display: table-cell;
  vertical-align: bottom;
  height: 200px;
}
.content {
  max-height: 200px;
  overflow: auto;
}

html

<div class="wrapper">
  <div class="content">
     <div>row 1</div>
     <div>row 2</div>
     <div>row 3</div>  
  </div>
</div>  

Selain itu, menurut saya tidak mungkin hanya dengan CSS. Anda dapat membuat elemen menempel di bagian bawah wadahnya position:absolute, tetapi itu akan membuatnya keluar dari aliran. Akibatnya, mereka tidak akan meregang dan membuat penampung dapat di-scroll.

Demo (posisi-absolut)

.wrapper {
  position: relative;
  height: 200px;
}
.content {
  position: absolute;
  bottom: 0;
  width: 100%;
}

dan overflow-y:autountuk wadah
venimus

@venimus - Ini akan menampilkan bilah gulir yang dinonaktifkan, karena tinggi wadah tidak terpengaruh oleh position:absoluteanak.
gblazex

solusi Anda tidak menampilkan scrollbar apa pun, yang merupakan bagian dari pertanyaan
venimus

Saya telah memperbarui jawabannya. Anda dapat mengatasi masalah scrollbar di browser modern (IE 7+).
gblazex

1
Terima kasih atas jawaban Anda, pembungkusnya melakukan pekerjaan dengan baik.
Wulf

42

Jawaban yang lebih modern untuk ini adalah dengan menggunakan flexbox.

Seperti banyak fitur modern lainnya, fitur ini tidak akan berfungsi di browser lama , jadi kecuali Anda siap untuk meninggalkan dukungan untuk browser dari era IE8-9, Anda perlu mencari metode lain.

Begini caranya:

.parent {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

.child {
  /* whatever */
}

Dan hanya itu yang Anda butuhkan. Untuk bacaan lebih lanjut flexbox, lihat MDN .

Berikut ini contohnya dengan beberapa gaya dasar: http://codepen.io/Mest/pen/Gnbfk


Jawaban yang luar biasa, terima kasih banyak! Belum mendengar tentang kotak fleksibel, kedengarannya sangat menarik!
Wulf

5
Ini membalik urutan tetapi tidak menariknya ke dasar induk.
Edward Anderson

@nilbus maukah Anda menjelaskan? Tes saya sebelumnya dan bahkan contoh terlampir tampaknya menarik ke bawah ke bagian bawah elemen induk.
Nils Kaspersson

Sepertinya saya salah. Mungkin ada gaya yang bertentangan yang membuatnya tidak berhasil bagi saya. Terima kasih!
Edward Anderson

Saya menemukan di kode contoh, ada .parent {position: fixed;} yang membuat ini berfungsi. Selain itu, pengguliran di demo tidak berfungsi di Chome, Anda memerlukan ini: .parant {-webkit-flex: 1 1 auto; overflow-y: otomatis; min-height: 0px;} dan hapus posisi tetap
Ng Sek Long

1

Kita cukup menggunakan transformasi CSS untuk mengarsipkan ini.

Saya membuat codepen untuk itu. https://codepen.io/king-dev/pen/PoPgXEg

.root {
  transform: scaleY(-1);
}
.root > div {
  transform: scaleY(-1);
}

Idenya adalah membalik root terlebih dahulu secara horizontal dan kemudian membalik div turunan langsung lagi.

CATATAN: metode di atas juga membalik urutan div. Jika Anda hanya ingin menempatkannya mulai dari bawah, Anda dapat melakukan hal berikut.

.root {
  display: flex;
  flex-direction: column;
  height: 100px;
  overflow-y: auto;
}
.root > div:first-child {
  margin-top: auto;
}

0

Keepin 'itu oldskool ...

Saya ingin melakukan hal yang sama di #header div jadi saya membuat div kosong yang disebut #headspacedan meletakkannya di atas tumpukan (di dalam #header):

<div id="header">
    <div id="headspace"></div>
    <div id="one">some content</div>
    <div id="two">other content</div>
    <div id="three">more content</div>
</div> <!-- header -->

Lalu saya menggunakan persentase , untuk ketinggian #headspace div tak terlihat , untuk mendorong yang lain ke bawah. Sangat mudah menggunakan alat pengembang / inspektur di browser untuk melakukannya dengan benar.

#header {
    width: 100%;
    height: 10rem;
    overflow: auto;
}

#headspace {
    width: 100%;
    height: 42%;    /* Experiment with Inspect (Element) tool */
}

#one, #two, #three {
    /* Insert appropriate dimensions for others... */
}

Ini hanya akan berfungsi jika Anda memiliki konten tetap. jika Anda memiliki konten dinamis dan tidak tahu siapa banyak div yang akan dirender, ini tidak akan berfungsi.
Sajid Ali

Itu hanya solusi kecil yang saya gunakan. Tidak ada penyebutan khusus tentang perlunya konten dinamis - untuk semua yang saya tahu halaman tersebut sepenuhnya disegarkan setiap kali a divditambahkan. Jadi saya taruh ini di sini jika seseorang benar-benar menginginkan solusi yang lebih statis. Dengan kata lain: Saya pikir suara nol akan lebih tepat daripada suara negatif.
veganaiZe

Terima kasih telah meluangkan waktu dan memberikan jawaban dengan konten statis. Saya menghargai itu. Pertanyaan tersebut dengan jelas menunjukkan konten dinamis, di Child Div #mana div turunan meningkat, dan ketika ditingkatkan dengan ketinggian tertentu, seharusnya ada scroll yang ditampilkan. jadi jawaban ini tidak memberikan solusi untuk pertanyaan sebenarnya.
Sajid Ali

0

Saya ingin ini bekerja dengan bootstarp seperti aplikasi chatting di mana pesan mengalir dari bawah ke atas

setelah membaca sesuatu, saya menemukan ini

saya memiliki div luar menganggap kelas .outerDiv dan kemudian UI, daftar

.outerDiv {
    height: 361px;
    position: relative;
}
ui.msg-content{
    width: 100%;
    bottom: 0;
    position: absolute;
    max-height: 98%;
    overflow-y: auto;
}

masukkan deskripsi gambar di sini

masukkan deskripsi gambar di sini



-5
<div style="height: 500px;">
    <div style="height: 20px; position: absolute; bottom: 120px;">Child Div 1</div>
    <div style="height: 20px; position: absolute; bottom: 100px;">Child Div 2</div>
    <div style="height: 20px; position: absolute; bottom: 80px;">Child Div 3</div>
    <div style="height: 20px; position: absolute; bottom: 60px;">Child Div 4</div>
    <div style="height: 20px; position: absolute; bottom: 40px;">Child Div 5</div>
</div>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.