Bagaimana untuk Memastikan Div Limpahan Ditatal ke Bawah Sentiasa, Walaupun Penambahan Kandungan Baharu?

Menyimpan Div Limpahan Ditatal ke Bawah (Melainkan Pengguna Menatal Ke Atas)

Dalam senario tertentu, kita memerlukan div untuk menatal secara automatik ke bahagian bawah apabila halaman dimuatkan dan kekal di sana sehingga pengguna menatal ke atas. Walau bagaimanapun, apabila pengguna menatal semula ke bawah, div harus kekal di bahagian bawah walaupun terdapat penambahan kandungan dinamik.

Penyelesaian dengan CSS

Penyelesaian yang bijak untuk mencapai ini tingkah laku adalah dengan menggunakan CSS's flex-direction: column-reverse property. Ini mengarahkan penyemak imbas untuk menganggap bahagian bawah div sebagai bahagian atas. Selagi penanda HTML berada dalam susunan terbalik, penyemak imbas akan memastikan kandungan bahagian bawah sentiasa dipaparkan.

Kod Contoh

<code class="css">.container {
  height: 100px;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
}</code>

<code class="html"><div class="container">
  <div>Bottom</div>
  <div>Hi</div>
  <!-- More content... -->
  <div>Top</div>
</div></code>

Kelebihan Pendekatan ini

• Penyelesaian CSS tulen, tiada JavaScript diperlukan
• Serasi merentas penyemak imbas
• Menyokong pemasukan kandungan dinamik
• Mengekalkan kedudukan tatal walaupun selepas menatal ke atas

Atas ialah kandungan terperinci Bagaimana untuk Memastikan Div Limpahan Ditatal ke Bawah Sentiasa, Walaupun Penambahan Kandungan Baharu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!