Cara membuat bagian footer halaman ("footer") menempel di batas bawah jendela - ini mungkin masalah paling umum dalam tata letak halaman situs. Tentu saja ada solusi, dan ada beberapa di antaranya. Di bawah ini adalah salah satu cara untuk memastikan bahwa footer selalu ditekan ke bagian bawah halaman, terlepas dari jumlah konten dan jenis browser.
Itu perlu
Pengetahuan dasar tentang CSS dan HTML
instruksi
Langkah 1
Mari kita ambil salah satu skema pagination yang lebih umum sebagai contoh - ia akan memiliki loteng (header), blok utama, dan footer. Tentu saja, jika perlu, Anda dapat menempatkan beberapa kolom di blok utama, tetapi kami tidak akan melakukannya di sini, kami hanya akan fokus pada tidak memposisikan footer. Kode HTML halaman akan dimulai dengan deklarasi spesifikasi:
Di antara tag dan, selain judul halaman, kami akan menempatkan indikasi penyandian: Serta tautan ke file CSS eksternal yang berisi deskripsi gaya: @import "styles.css"; Kami tidak akan menempatkan deskripsi gaya langsung ke dalam kode html halaman untuk menghindari komplikasi dengan browser Opera versi 9. Antara tag dan tempatkan struktur blok halaman. Yang pertama, tentu saja, adalah blok judul. Kami akan memberikan pengidentifikasi tajuk untuk dapat mengatur gaya untuk blok khusus ini:
Header ini selalu berada di bagian atas jendela.
Kemudian - blok utama halaman. Ini akan terdiri dari dua yang bersarang - luar (pengidentifikasi - luar) dan dalam (pengidentifikasi - pembungkus luar):
Ini adalah bagian utama.
Dan akhirnya, catatan kaki:
Ini footer - selalu di bagian bawah jendela!
Halaman lengkapnya akan terlihat seperti ini:
Cara menekan footer
@import "styles.css";
Header ini selalu berada di bagian atas jendela.
Ini adalah bagian utama.
Ini footer - selalu di bagian bawah jendela!
Langkah 2
Sekarang mari kita beralih ke isi dari stylesheet. Ini menerapkan skema berikut: blok halaman utama akan diatur ke ketinggian 100%, judul akan benar-benar diposisikan, dan footer akan relatif. Untuk mencegah judul agar tidak tumpang tindih dengan konten utama halaman, konten utama ini ditempatkan di kotak tambahan di dalam kotak utama, dan kotak tambahan ini diatur ke margin atas yang sama dengan tinggi kotak judul. Dan footer diberi margin atas negatif sama dengan tingginya - dengan cara ini akan dinaikkan di atas tepi bawah jendela hingga ketinggian penuh. Isi lengkap file css: * {margin: 0; bantalan: 0}
html, badan {tinggi: 100%;} badan {
warna hitam;
posisi: relatif;
}
#luar {
tinggi minimum: 100%;
margin: 0;
latar belakang: putih;
warna hitam;
} * html #outer {tinggi: 100%;}
#tajuk {
posisi: mutlak;
atas: 0;
kiri: 0;
lebar: 100%;
tinggi: 70 piksel;
latar belakang: #304a00;
melimpah: tersembunyi;
warna putih;
perataan teks: tengah;
} #kaki {
posisi: relatif;
margin-atas: -50px;
jelas: keduanya;
lebar: 100%;
tinggi: 50 piksel;
warna-latar belakang: # 304a00;
warna putih;
perataan teks: tengah;
}
.bungkus luar {
mengapung: kiri;
lebar: 100%;
padding-top: 71px;
} File ini harus disimpan dengan nama yang kita tentukan dalam kode-html halaman - styles.css.
