Bagaimanakah Saya Boleh Membuat Elemen DIV Dilanjutkan ke Bahagian Bawah Halaman Tanpa Menggunakan Kandungan?

Linda Hamilton
Lepaskan: 2024-11-23 12:42:16
asal
574 orang telah melayarinya

How Can I Make a DIV Element Extend to the Bottom of the Page Without Using Content?

Paksa Blok DIV untuk Dilanjutkan ke Bawah Halaman Tanpa Kandungan

Melanjutkan blok DIV ke bahagian bawah halaman tanpa kandungan boleh menimbulkan cabaran . Untuk mencapai matlamat ini, kita mesti terlebih dahulu menangani had fleksibiliti DIV.

Memahami Isu

Dalam markup yang diberikan, DIV "kandungan" tidak meregangkan bahagian bawah halaman kerana bekasnya, "menuwrapper" DIV, bukan ketinggian 100%. Kandungan DIV dikekang oleh saiz bekasnya.

Penyelesaian

Untuk menyelesaikan isu ini, kami mengubah suai CSS untuk memastikan bekas DIV ("menuwrapper") meluas ke ketinggian penuh halaman:

html, body {
    height: 100%;
}
Salin selepas log masuk

Ini menetapkan kedua-dua elemen HTML dan badan kepada 100% ketinggian, memaksa bekas DIV untuk mengisi keseluruhan ruang menegak halaman.

Pertimbangan Tambahan

Bergantung pada penyemak imbas, pelarasan tambahan mungkin diperlukan, seperti mengubah suai jidar atau padding. Rujuk sumber berikut untuk lebih lanjut bantuan:

  • http://www.brunildo.org/test/html_body_0.html
  • http://www.brunildo.org/test/html_body_11b.html
  • http://www.brunildo.org/test/index.html

Untuk maklumat komprehensif tentang ketinggian CSS, lawati http://quirksmode.org/.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Elemen DIV Dilanjutkan ke Bahagian Bawah Halaman Tanpa Menggunakan Kandungan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan