"Footer" biasanya merupakan blok paling banyak susun atur halaman web. Kesukaran yang paling biasa dalam meletakkan footer ini adalah membuatnya sentiasa berada di bahagian bawah tetingkap, tanpa mengira kepenuhan halaman atau jenis penyemak imbas. Terdapat beberapa penyelesaian untuk masalah ini sejak peralihan besar-besaran ke susun atur blok, dan salah satunya diberikan di bawah.
Ia perlu
Pengetahuan asas mengenai CSS dan HTML
Arahan
Langkah 1
Mari kita gunakan skema susun atur halaman yang paling biasa - tiga blok diletakkan satu di atas yang lain. Bahagian atas (header) harus selalu diselaraskan dengan batas atas tingkap, bahagian bawah (footer) - ke batas bawah, dan yang utama (badan) harus selalu mengisi semua ruang di antara mereka. Kod sumber mesti mengandungi pautan ke spesifikasi peralihan XHTML 1.0, dan deskripsi gaya mesti diletakkan di dalam fail CSS luaran (untuk mengelakkan masalah dengan Opera 9. XX). Huraian HTML struktur mesti diletakkan di utama bahagian halaman. Ini akan bermula, tentu saja, dari blok atas, pada tag yang mana atribut pengenal dengan nilai harus diletakkan, misalnya, divHead:
Sekatan tajuk.
Blok utama harus terdiri daripada sepasang blok bersarang. Bahagian luar akan diberi pengecam divOut, dan yang dalam - divContent:
Kandungan utama.
Footer ditetapkan untuk divFoot:
Kaki halaman.
Langkah 2
Kod HTML halaman yang lengkap akan kelihatan seperti ini:
Tiga blok
@import "style.css";
Ini adalah blok tajuk.
Kandungan utama.
Ini adalah bahagian bawah halaman.
Langkah 3
Huraian gaya menerapkan mekanisme susun atur berikut: blok tengah (divOut) ditetapkan ke ketinggian 100%, blok atas (divHead) akan mempunyai kedudukan mutlak, dan yang bawah - relatif. Di blok kandungan utama (divContent), mesti ada ruang kosong di bahagian atas yang sama dengan ketinggian blok tajuk sehingga tidak bertindih dengan isi utama halaman. Dan blok bawah (footer) harus mempunyai margin negatif di bahagian atas, sama dengan ketinggian blok ini. Ini akan menaikkannya di atas sempadan bawah tetingkap penyemak imbas. Mekanisme ini dapat dilaksanakan dengan menggunakan fail css dengan kandungan berikut: * {margin: 0; pembalut: 0}
html, badan {tinggi: 100%;} badan {
kedudukan: saudara;
warna: # 000;
}
#divKeluar {
margin: 0;
ketinggian min: 100%;
latar belakang: #FFF;
warna: # 000;
}
* html #divOut {tinggi: 100%;}
#divHead {
kedudukan: mutlak;
kiri: 0;
atas: 0;
lebar: 100%;
tinggi: 80px;
latar belakang: # 2F5000;
limpahan: tersembunyi;
text-align: tengah;
warna: #FFF;
} #divFoot {
kedudukan: saudara;
jelas: kedua-duanya;
margin-top: -60 piksel;
tinggi: 60 piksel;
lebar: 100%;
warna latar: # 2F5000;
text-align: tengah;
warna: #FFF;
}
.divContent {
lebar: 100%;
terapung: kiri;
padding-top: 81px;
} Nama yang anda nyatakan untuk helaian gaya dalam kod HTML adalah style.css.
