Kaip priversti puslapio poraštę („poraštę“) prilipti prie apatinės lango ribos - tai bene dažniausia svetainės puslapių išdėstymo problema. Žinoma, yra sprendimų, ir jų yra keletas. Žemiau pateikiamas vienas iš būdų įsitikinti, kad poraštė visada prispaudžiama puslapio apačioje, neatsižvelgiant į turinio kiekį ir naršyklės tipą.
Tai būtina
Pagrindinės CSS ir HTML žinios
Nurodymai
1 žingsnis
Paimkime pavyzdžiu vieną iš tipiškesnių puslapiavimo schemų - ji turės palėpę (antraštę), pagrindinį bloką ir poraštę. Žinoma, jei reikia, pagrindiniame bloke galite įdėti kelis stulpelius, tačiau čia to nepadarysime, daugiausia dėmesio skirsime poraštės nepastatymui. Puslapio HTML kodas prasidės nurodant specifikaciją:
Tarp žymių ir, be puslapio pavadinimo, įdėsime kodavimo nuorodą: Taip pat nuorodą į išorinį CSS failą, kuriame yra stilių aprašymas: @import "styles.css"; stilių aprašymas tiesiai į puslapio HTML kodą, kad išvengtumėte devintosios versijos „Opera“naršyklės komplikacijų. Tarp žymų įdėkite puslapio blokinę struktūrą. Pirmasis, žinoma, yra pavadinimo blokas. Mes suteiksime jai antraštės identifikatorių, kad būtų galima nustatyti šio konkretaus bloko stilius:
Ši antraštė visada yra lango viršuje.
Tada - pagrindinis puslapio blokas. Jį sudarys du įdėtieji - išorinis (identifikatorius - išorinis) ir vidinis (identifikatorius - išorinis apvyniojimas):
Tai yra pagrindinė dalis.
Galiausiai poraštė:
Tai poraštė - visada lango apačioje!
Visas puslapis atrodys taip:
Kaip nuspausti poraštę
@import "styles.css";
Ši antraštė visada yra lango viršuje.
Tai yra pagrindinė dalis.
Tai poraštė - visada lango apačioje!
2 žingsnis
Dabar pereikime prie stiliaus lapo turinio. Ji įgyvendina šią schemą: pagrindinio puslapio blokas bus nustatytas 100% aukščio, pavadinimas bus visiškai išdėstytas, o poraštė bus santykinai. Kad antraštė nesutaptų su pagrindiniu puslapio turiniu, šis pagrindinis turinys dedamas į papildomą langelį pagrindiniame laukelyje, o šis papildomas langelis nustatomas kaip viršutinė paraštė, lygi antraštės langelio aukščiui. Poraštei suteikiama neigiama viršutinė paraštė, lygi jos aukštiui - tokiu būdu ji bus pakelta virš apatinio lango krašto iki viso aukščio. Visas css failo turinys: * {margin: 0; užpildas: 0}
HTML, body {aukštis: 100%;} body {
spalva: juoda;
padėtis: giminaitis;
}
#išorinis {
min-aukštis: 100%;
paraštė: 0;
fonas: baltas;
spalva: juoda;
} * html #outer {aukštis: 100%;}
#header {
pozicija: absoliuti;
viršuje: 0;
kairėje: 0;
plotis: 100%;
aukštis: 70 taškų;
fonas: # 304a00;
perteklius paslėptas;
spalva: balta;
text-align: centre;
} #footer {
padėtis: giminaitis;
paraštė-viršus: -50px;
aišku: tiek;
plotis: 100%;
aukštis: 50 taškų;
fono spalva: # 304a00;
spalva: balta;
text-align: centre;
}
.outerwrap {
plūdė: kairė;
plotis: 100%;
topding-top: 71px;
} Šis failas turėtų būti išsaugotas su pavadinimu, kurį nurodėme puslapio HTML kode - styles.css.
