"Footer" biasanya merupakan blok paling bawah dari tata letak halaman web. Kesulitan paling umum dalam memposisikan footer ini adalah membuatnya selalu diposisikan di bagian bawah jendela, terlepas dari kepenuhan halaman atau jenis browser. Ada beberapa solusi untuk masalah ini sejak masa transisi besar-besaran ke tata letak blok, dan salah satunya diberikan di bawah ini.
Itu perlu
Pengetahuan dasar tentang CSS dan HTML
instruksi
Langkah 1
Mari kita ambil skema tata letak halaman yang paling umum sebagai dasar - tiga blok ditempatkan satu di atas yang lain. Bagian atas (header) harus selalu disejajarkan dengan batas atas jendela, bagian bawah (footer) - ke batas bawah, dan bagian utama (body) harus selalu mengisi semua ruang di antara keduanya. Kode sumber harus berisi tautan ke spesifikasi Transisi XHTML 1.0, dan deskripsi gaya harus ditempatkan di file CSS eksternal (untuk menghindari masalah dengan Opera 9. XX). Deskripsi HTML tentang struktur harus ditempatkan di utama badan halaman. Ini akan dimulai, tentu saja, dari blok atas, di tag di mana atribut pengenal dengan nilai harus ditempatkan, misalnya, divHead:
Blok tajuk.
Blok utama harus terdiri dari sepasang blok bersarang. Yang luar akan diberikan pengidentifikasi divOut, dan yang dalam - divContent:
Isi utama.
Footer diatur ke divFoot:
Catatan kaki halaman.
Langkah 2
Kode HTML lengkap halaman akan terlihat seperti ini:
Tiga blok
@import "style.css";
Ini adalah blok header.
Isi utama.
Ini adalah footer halaman.
Langkah 3
Deskripsi gaya menerapkan mekanisme tata letak berikut: blok tengah (divOut) diatur ke ketinggian 100%, blok atas (divHead) akan memiliki posisi absolut, dan blok bawah - relatif. Di blok konten utama (divContent), harus ada ruang kosong di bagian atas yang sama dengan tinggi blok judul agar tidak tumpang tindih dengan konten utama halaman. Dan blok bawah (footer) harus memiliki margin negatif di bagian atas, sama dengan tinggi blok ini. Ini akan menaikkannya di atas batas bawah jendela browser. Mekanisme ini dapat diimplementasikan menggunakan file css dengan isi sebagai berikut: * {margin: 0; bantalan: 0}
html, badan {tinggi: 100%;} badan {
posisi: relatif;
warna: #000;
}
#divOut {
margin: 0;
tinggi minimum: 100%;
latar belakang: #FFF;
warna: #000;
}
* html #divOut {tinggi: 100%;}
#divKepala {
posisi: mutlak;
kiri: 0;
atas: 0;
lebar: 100%;
tinggi: 80 piksel;
latar belakang: #2F5000;
melimpah: tersembunyi;
perataan teks: tengah;
warna: #FFF;
} #divKaki {
posisi: relatif;
jelas: keduanya;
margin-atas: -60px;
tinggi: 60 piksel;
lebar: 100%;
warna-latar belakang: #2F5000;
perataan teks: tengah;
warna: #FFF;
}
.divKonten {
lebar: 100%;
mengapung: kiri;
padding-atas: 81px;
} Nama yang Anda tentukan untuk stylesheet dalam kode HTML adalah style.css.
