Kuidas panna lehe jalus ("jalus") akna alumise ääre külge kinni jääma - see on ilmselt kõige levinum probleem saidilehtede paigutuses. Loomulikult on lahendusi ja neid on mitu. Allpool on üks viis veenduda, et jalus on alati lehe alaossa surutud, olenemata sisu hulgast ja brauseri tüübist.
See on vajalik
Põhiteadmised CSS-ist ja HTML-ist
Juhised
Samm 1
Võtame näiteks ühe tüüpilisema lehitsemise skeemi - sellel on pööning (päis), põhiplokk ja jalus. Muidugi, kui vaja, võite panna mitu plokki põhiplokki, kuid me ei tee seda siin, vaid keskendume jalusele mitte paigutamisele. Lehe HTML-kood algab spetsifikatsiooni deklareerimisega:
Siltide vahele ja lisaks lehe pealkirjale paigutame ka märke kodeeringu kohta: lisaks lingi välisele CSS-failile, mis sisaldab stiilide kirjeldust: @import "styles.css"; Me ei asu stiilide kirjeldus otse lehe HTML-koodi, et vältida komplikatsioone üheksanda versiooni Opera brauseriga. Siltide vahele ja asetage lehe plokistruktuur. Esimene on muidugi tiitliplokk. Anname sellele päise identifikaatori, et saaksite sellele konkreetsele plokile stiile seada:
See päis on alati akna ülaosas.
Siis - lehe peamine plokk. See koosneb kahest pesastatud pesast - välimine (identifikaator - välimine) ja sisemine (identifikaator - väliskate):
See on peamine osa.
Ja lõpuks, jalus:
See on jalus - alati akna allosas!
Kogu leht näeb välja selline:
Kuidas jalus alla vajutada
@import "styles.css";
See päis on alati akna ülaosas.
See on peamine osa.
See on jalus - alati akna allosas!
2. samm
Nüüd liigume stiililehe sisu juurde. See rakendab järgmist skeemi: põhilehe plokk seatakse 100% kõrgusele, pealkiri on absoluutselt paigutatud ja jalus on suhteliselt. Vältimaks pealkirja kattumist lehe põhisisuga, paigutatakse see põhisisu peavälja lisakasti ja see lisakast on seatud pealmisele veerele, mis võrdub pealkirjakasti kõrgusega. Jalusele antakse selle kõrgusega võrdne negatiivne ülemine veeris - nii tõstetakse see akna alumisest servast kõrgemale täiskõrgusele. Css-faili täielik sisu: * {margin: 0; polster: 0}
HTML, keha {kõrgus: 100%;} keha {
värv: must;
positsioon: sugulane;
}
#outer {
min-kõrgus: 100%;
varu: 0;
taust: valge;
värv: must;
} * html #outer {kõrgus: 100%;}
#header {
positsioon: absoluutne;
ülemine: 0;
vasakul: 0;
laius: 100%;
kõrgus: 70px;
taust: # 304a00;
ülevool: varjatud;
värvus: valge;
teksti joondamine: keskel;
} #footer {
positsioon: sugulane;
ülemine äär: -50px;
selge: mõlemad;
laius: 100%;
kõrgus: 50px;
taustavärv: # 304a00;
värvus: valge;
teksti joondamine: keskel;
}
.outerwrap {
ujuk: vasak;
laius: 100%;
top polster: 71px;
} See fail tuleks salvestada nimega, mille määrasime lehe HTML-koodis - styles.css.
