Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Melabuhkan Div ke Bahagian Bawah Kandungan Halaman Dinamik?

Bagaimana untuk Melabuhkan Div ke Bahagian Bawah Kandungan Halaman Dinamik?

Susan Sarandon
Susan Sarandonasal
2024-12-13 00:47:10808semak imbas

How to Anchor a Div to the Bottom of Dynamic Page Content?

Melabuhkan Div ke Bahagian Bawah Halaman Kandungan dengan Kandungan Dinamik

Masalah:

Anda perlu mencipta div (#footer) yang kekal di bahagian bawah kandungan halaman, walaupun apabila bar skrol erscheinen. Tidak seperti penentududukan tetap, ia hanya perlu diletakkan pada penghujung kandungan sebenar, bukan port pandangan.

Pelaksanaan Semasa:

#footer {
    position: absolute;
    bottom: 30px;
    width: 100%;
}

Kaedah ini meletakkan div di bahagian bawah port pandangan, tetapi ia kekal di sana walaupun apabila halaman itu ditatal, mengakibatkan salah jajaran dengan kandungan.

Penyelesaian: Kedudukan Ditetapkan dengan Pelarasan Bawah

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

Dengan menetapkan kedudukan kepada tetap, div menjadi anclado ke bahagian bawah tetingkap penyemak imbas. Sifat bawah memastikan bahawa div diletakkan di dasar mutlak halaman, tanpa mengira keterlihatan bar skrol.

Kedudukan ini membolehkan div kekal sejajar dengan bahagian bawah kandungan, seperti yang digambarkan dalam contoh.

Atas ialah kandungan terperinci Bagaimana untuk Melabuhkan Div ke Bahagian Bawah Kandungan Halaman Dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn