Bagaimana Saya Membuat Elemen DIV Meluaskan ke Bahagian Bawah Halaman?-tutorial css-php.cn

Bagaimana Saya Membuat Elemen DIV Meluaskan ke Bahagian Bawah Halaman?

Barbara Streisand

Lepaskan： 2024-11-27 20:40:11

asal

437 orang telah melayarinya

How Do I Make a DIV Element Expand to the Bottom of the Page?

Menguatkuasakan Peluasan DIV ke Bawah Halaman

Dalam reka bentuk web, kadangkala blok DIV perlu dilanjutkan ke bahagian bawah halaman, walaupun dalam ketiadaan kandungan. Ini mungkin mencabar, kerana DIV biasanya hanya akan berkembang mengikut keperluan untuk menampung kandungannya.

Ikhtisar Masalah

Pertimbangkan penanda berikut:

<body>
  <div>

Salin selepas log masuk

Matlamatnya adalah untuk memaksa DIV dengan id="content" meregang secara menegak, mencapai halaman bawah, tanpa mengira kandungan.

Penyelesaian

Isunya bukan terletak pada ketinggian DIV kandungan, tetapi pada bekas yang mengelilinginya. Untuk membetulkan ini, gunakan CSS berikut pada html dan elemen badan:

html, body { height:100%; }

Salin selepas log masuk

Ini memastikan penyemak imbas memaparkan halaman dengan ketinggian 100%, membenarkan kandungan DIV meluas sepenuhnya ke hadnya.

Pertimbangan Tambahan

Walaupun penyelesaian ini akan menangani kebanyakan kes, adalah penting untuk ambil perhatian bahawa penyemak imbas yang berbeza mungkin melaksanakan pengiraan ketinggian sedikit berbeza. Berikut ialah beberapa sumber berguna yang menyediakan lebih lanjut pandangan:

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

Selain itu, rujuk http://quirksmode.org/ untuk maklumat keserasian penyemak imbas yang komprehensif.

Atas ialah kandungan terperinci Bagaimana Saya Membuat Elemen DIV Meluaskan ke Bahagian Bawah Halaman?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!