Kā likt, lai lapas kājene ("kājene") pieturētos pie loga apakšējās robežas - tā, iespējams, ir visizplatītākā vietņu lapu izkārtojuma problēma. Protams, ir risinājumi, un ir vairāki no tiem. Zemāk ir viens veids, kā pārliecināties, vai kājene vienmēr tiek nospiesta lapas apakšdaļā, neatkarīgi no satura apjoma un pārlūkprogrammas veida.
Tas ir nepieciešams
Pamatzināšanas par CSS un HTML
Instrukcijas
1. solis
Ņemsim par piemēru vienu no tipiskākajām lapošanas shēmām - tai būs bēniņi (galvene), galvenais bloks un kājene. Protams, ja nepieciešams, galvenajā blokā varat ievietot vairākas kolonnas, taču mēs to šeit nedarīsim, mēs koncentrēsimies tikai uz kājenes nenovietošanu. Lapas HTML kods sāksies ar specifikācijas deklarāciju:
Starp tagiem un papildus lapas nosaukumam ievietosim norādi par kodējumu: kā arī saiti uz ārēju CSS failu, kurā ir stilu apraksts: @import "styles.css"; stilu apraksts tieši lapas HTML kodā, lai izvairītos no sarežģījumiem ar Opera devītās versijas pārlūku. Starp tagiem un ievietojiet lapas bloku struktūru. Pirmais, protams, ir nosaukuma bloks. Mēs piešķirsim tam galvenes identifikatoru, lai varētu iestatīt stilus šim konkrētajam blokam:
Šī galvene vienmēr atrodas loga augšdaļā.
Tad - lapas galvenais bloks. Tas sastāvēs no diviem ligzdotiem - ārējā (identifikators - ārējais) un iekšējā (identifikators - ārējā ietīšana):
Šī ir galvenā daļa.
Visbeidzot, kājene:
Tā ir kājene - vienmēr loga apakšā!
Visa lapa izskatīsies šādi:
Kā nospiest kājeni
@import "styles.css";
Šī galvene vienmēr atrodas loga augšdaļā.
Šī ir galvenā daļa.
Tā ir kājene - vienmēr loga apakšā!
2. solis
Tagad pāriesim pie stilu lapas satura. Tas ievieš šādu shēmu: galvenās lapas bloks tiks iestatīts uz 100% augstumu, nosaukums būs absolūti novietots un kājene būs relatīvi. Lai virsraksts nepārklājas ar galveno lapas saturu, šis galvenais saturs tiek ievietots papildu lodziņā galvenajā lodziņā, un šī papildu lodziņa ir iestatīta uz augšējo piemali, kas vienāda ar virsraksta lodziņa augstumu. Kājenei tiek piešķirta negatīva augšējā mala, kas vienāda ar tās augstumu - tādā veidā tā tiks pacelta virs loga apakšējās malas līdz pilnam augstumam. Pilns css faila saturs: * {margin: 0; polsterējums: 0}
html, body {height: 100%;} body {
krāsa: melna;
amats: radinieks;
}
#outer {
min-augstums: 100%;
starpība: 0;
fons: balts;
krāsa: melna;
} * html #outer {augstums: 100%;}
#header {
pozīcija: absolūta;
augšdaļa: 0;
pa kreisi: 0;
platums: 100%;
augstums: 70 pikseļi;
fons: # 304a00;
pārplūde: slēpta;
krāsa: balta;
text-align: center;
} #footer {
amats: radinieks;
margin-top: -50px;
skaidrs: abi;
platums: 100%;
augstums: 50px;
fona krāsa: # 304a00;
krāsa: balta;
text-align: center;
}
.outerwrap {
pludiņš: pa kreisi;
platums: 100%;
polsterējums - 71 pikseļi;
} Šis fails ir jāsaglabā ar nosaukumu, kuru norādījām lapas HTML kodā - styles.css.
