Bagaimana untuk Menyimpan Div di Bahagian Bawah Halaman Semasa Menatal?

Mengekalkan Div di Bawah Halaman dengan Kandungan Tatal

Mencapai kesan apabila pengaki kekal di bahagian bawah halaman walaupun menatal memerlukan yang khusus pendekatan. Walaupun hasil yang diingini adalah serupa dengan melakukan push div ke bahagian bawah halaman, penyelesaiannya berbeza.

Kuncinya terletak pada memahami gelagat pilihan kedudukan CSS yang berbeza. Dalam kes ini, position: absolute telah digunakan untuk mengalihkan footer ke bahagian bawah viewport. Walau bagaimanapun, kedudukan ini kekal tetap berhubung dengan port pandangan, menyebabkan pengaki kekal di lokasi yang sama walaupun semasa kandungan menatal.

Untuk memastikan div kekal di bahagian bawah kandungan halaman, kedudukan: tetapkan hendaklah digunakan sebaliknya:

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

Dengan pengubahsuaian ini, pengaki akan dibetulkan ke bahagian bawah halaman, tidak kira sama ada kandungan melimpah. Ia akan menatal bersama dengan kandungan, kekal di bahagian bawah semua elemen yang boleh dilihat. Tingkah laku ini biasanya dilihat pada tapak web seperti Stack Overflow, di mana pengaki kekal di bahagian bawah walaupun terdapat banyak soalan dan jawapan pada halaman.

Dengan menggunakan kedudukan: tetap, div akan kekal di bahagian bawah kandungan halaman, menyesuaikan diri dengan ketinggian dinamik halaman semasa tatal kandungan, mengekalkan reka letak yang diingini.

Atas ialah kandungan terperinci Bagaimana untuk Menyimpan Div di Bahagian Bawah Halaman Semasa Menatal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!