Cara menjadikan bahagian footer dari halaman ("footer") melekat pada batas bawah tetingkap - ini mungkin merupakan masalah yang paling biasa dalam susun atur halaman laman web. Sudah tentu ada penyelesaian, dan ada beberapa di antaranya. Di bawah adalah salah satu cara untuk memastikan bahawa footer selalu ditekan ke bahagian bawah halaman, tanpa mengira jumlah kandungan dan jenis penyemak imbas.
Ia perlu
Pengetahuan asas mengenai CSS dan HTML
Arahan
Langkah 1
Mari kita ambil salah satu skema penomboran yang lebih biasa sebagai contoh - ia akan mempunyai loteng (header), blok utama, dan footer. Sudah tentu, jika perlu, anda boleh meletakkan beberapa lajur di blok utama, tetapi kami tidak akan melakukannya di sini, kami hanya akan memfokuskan diri untuk tidak meletakkan footer. Kod HTML halaman akan dimulakan dengan pernyataan spesifikasi:
Di antara tag dan, selain judul halaman, kami akan meletakkan petunjuk pengekodan: Serta pautan ke fail CSS luaran yang mengandungi keterangan gaya: @import "Styles.css"; Kami tidak akan meletakkan penerangan gaya terus ke dalam kod html halaman untuk mengelakkan komplikasi dengan penyemak imbas Opera versi kesembilan.. Antara tag dan letakkan struktur blok halaman. Yang pertama, tentu saja, adalah blok tajuk. Kami akan memberikan pengecam tajuk untuk dapat menetapkan gaya untuk blok tertentu:
Tajuk ini selalu berada di bahagian atas tetingkap.
Kemudian - blok utama halaman. Ia akan terdiri daripada dua yang bersarang - luar (pengecam - luar) dan dalaman (pengecam - pembungkus luar):
Ini adalah bahagian utama.
Dan akhirnya, footer:
Ini footer - selalu di bahagian bawah tetingkap!
Halaman yang lengkap akan kelihatan seperti ini:
Cara menekan bawah kaki
@import "gaya.css";
Tajuk ini selalu berada di bahagian atas tetingkap.
Ini adalah bahagian utama.
Ini footer - selalu di bahagian bawah tetingkap!
Langkah 2
Sekarang mari kita beralih ke kandungan helaian gaya. Ini menerapkan skema berikut: blok halaman utama akan diatur ke ketinggian 100%, judul akan benar-benar diposisikan, dan footer relatif. Untuk mengelakkan tajuk daripada tumpang tindih dengan isi utama halaman, kandungan utama ini diletakkan di dalam kotak tambahan di dalam kotak utama, dan kotak tambahan ini diatur ke margin atas sama dengan tinggi dari kotak tajuk. Dan footer diberi margin atas negatif sama dengan ketinggiannya - dengan cara ini ia akan dinaikkan di atas tepi bawah tingkap hingga ketinggian penuh. Kandungan penuh fail css: * {margin: 0; pembalut: 0}
html, badan {tinggi: 100%;} badan {
warna: hitam;
kedudukan: saudara;
}
# penghala {
ketinggian min: 100%;
margin: 0;
latar belakang: putih;
warna: hitam;
} * html #outer {tinggi: 100%;}
#kepala {
kedudukan: mutlak;
atas: 0;
kiri: 0;
lebar: 100%;
tinggi: 70px;
latar belakang: # 304a00;
limpahan: tersembunyi;
warna: putih;
text-align: tengah;
} #kaki {
kedudukan: saudara;
margin-top: -50 piksel;
jelas: kedua-duanya;
lebar: 100%;
tinggi: 50 piksel;
warna latar: # 304a00;
warna: putih;
text-align: tengah;
}
.outerwrap {
terapung: kiri;
lebar: 100%;
padding-top: 71px;
} Fail ini harus disimpan dengan nama yang kami tentukan dalam kod html halaman - styles.css.
