Ide dasarnya adalah

pertama-tama pertimbangkan untuk menyiapkan div container di lapisan luar, dengan id disetel ke #container, sehingga tingginya sama dengan tinggi jendela browser, lalu setel div #footer sebagai div turunan dari # container, dan gunakan posisi absolut untuk menyematkannya ke ujung bawah #container untuk mencapai efek yang diinginkan.

Klik di sini untuk melihat efek halaman kasus. Ubah tinggi dan lebar browser untuk melihat efek bagian Footer.

Implementasi kode

: Pertama pertimbangkan struktur HTML. Kode HTML halaman demo ini sangat sederhana.

body,html{
margin: 0;
bantalan: 0;
jenis huruf: 12px/1,5 arial;
tinggi:100%;
}
#wadah {
tinggi minimum:100%;
posisi: relatif;
}
#isi {
bantalan: 10 piksel;
bantalan-bawah: 60px;
/* 20px(ukuran font)x2(tinggi garis) + 10px(padding)x2=60px*/
}
#footer {
posisi: mutlak;
bawah: 0;
bantalan: 10px 0;
warna latar belakang: #AAA;
lebar: 100%;
}
#footer h1 {
jenis huruf: 20px/2 Arial;
margin:0;
bantalan:0 10 piksel;
}
1: Pertama, atur tinggi (atribut tinggi) elemen html dan body ke 100% (baris 5). Ini pertama-tama akan memastikan bahwa tinggi elemen root memenuhi seluruh jendela browser, dan kemudian tinggi #container can mengisi seluruh jendela browser. Adapun mengapa elemen html dan body diset secara bersamaan, karena Firefox dan IE menganggap elemen root berbeda, sehingga diatur di sini.

2: Kemudian atur tinggi #container menjadi 100% (baris 8), tetapi perhatikan bahwa atribut "min-height" digunakan di sini, bukan atribut tinggi biasa. Ini karena kita harus mempertimbangkan if # If konten jika konten bertambah dan tingginya melebihi tinggi jendela browser, maka jika tinggi #container masih 100%, #footer akan tetap ditempatkan di ujung bawah jendela browser, sehingga menutupi #konten konten di dalamnya. Tujuan menggunakan atribut min-height adalah untuk membuat tinggi #container "setidaknya" setinggi jendela browser. Ketika konten di dalamnya bertambah, tingginya juga akan bertambah. Ini adalah efek yang kita butuhkan.

Namun, perlu dicatat bahwa di Firefox dan IE7, atribut min-height didukung, sedangkan di IE6, atribut min-height tidak didukung. Namun, "kebetulan" di IE6, atribut min-height akan didukung ditafsirkan sebagai atribut height, tetapi efek dari atribut height di IE6 adalah efek yang seharusnya dimiliki min-height. Artinya, di IE6, tinggi div anak akan menambah tinggi div induk . Jadi ini bisa mencapai efek yang kita inginkan di IE6, IE7 dan Firefox.

3: Selanjutnya, atur #container ke posisi relatif (baris 9), untuk menjadikannya referensi posisi #footer di dalamnya, yang disebut "elemen leluhur yang diposisikan paling baru".

4: Kemudian atur #footer ke posisi absolut (baris 17) dan tempel di bagian bawah #container (baris 18).

5: Namun harap dicatat bahwa jika kita menempelkan #foooter di bagian bawah #container, itu sebenarnya akan tumpang tindih dengan div #content di atas. Untuk menghindari menutupi konten di #content, kita mengaturnya di #contetn Dengan menghapus padding di sisi bawah dan membuat nilai padding-bottom sama dengan tinggi #footer (baris 13), Anda dapat memastikan bahwa teks #content dihindari. Saat menghitung tinggi ini, perhatikan metode perhitungan yang diberikan di komentar dalam kode (baris 14).