Si ta bëni pjesën e poshtme të faqes ("fundin") të ngjitet në kufirin e poshtëm të dritares - ky është ndoshta problemi më i zakonshëm në paraqitjen e faqeve të faqes. Ka, sigurisht, zgjidhje, dhe ka disa prej tyre. Më poshtë është një mënyrë për të siguruar që fundi i faqes të shtypet gjithmonë në fund të faqes, pavarësisht nga sasia e përmbajtjes dhe lloji i shfletuesit.
Është e nevojshme
Njohuri themelore të CSS dhe HTML
Udhëzimet
Hapi 1
Le të marrim një nga skemat më tipike të faqëzimit si një shembull - ai do të ketë një papafingo (kokë), bllokun kryesor dhe fundin. Sigurisht, nëse është e nevojshme, mund të vendosni disa kolona në bllokun kryesor, por ne nuk do ta bëjmë këtë këtu, ne do të përqendrohemi vetëm në mos pozicionimin e faqes kryesore. Kodi HTML i faqes do të fillojë me deklarimin e specifikimit:
Midis etiketave dhe, përveç titullit të faqes, ne do të vendosim një tregues të kodimit: Si dhe një lidhje me një skedar të jashtëm CSS që përmban një përshkrim të stileve: @import "styles.css"; Ne nuk do ta vendosim përshkrimi i stileve direkt në kodin HTML të faqes për të shmangur ndërlikimet me shfletuesin Opera të versionit të nëntë. Midis etiketave dhe vendosni strukturën e bllokut të faqes. E para, natyrisht, është blloku i titullit. Ne do t'i japim atë identifikuesin e kokës për të qenë në gjendje të përcaktojë stilet për këtë bllok të veçantë:
Kjo kokë është gjithmonë në majë të dritares.
Pastaj - blloku kryesor i faqes. Do të përbëhet nga dy ato të vendosura - të jashtme (identifikues - i jashtëm) dhe i brendshëm (identifikues - mbështjellës i jashtëm):
Kjo është pjesa kryesore.
Dhe së fundmi, faqja kryesore:
Footshtë fund - gjithmonë në fund të dritares!
Faqja e plotë do të duket kështu:
Si të shtypni në fund të faqes
@import "styles.css";
Kjo kokë është gjithmonë në majë të dritares.
Kjo është pjesa kryesore.
Footshtë fund - gjithmonë në fund të dritares!
Hapi 2
Tani le të kalojmë në përmbajtjen e stilit. Zbaton skemën e mëposhtme: blloku i faqes kryesore do të vendoset në lartësi 100%, titulli do të pozicionohet absolutisht dhe fundi do të jetë relativisht. Për të parandaluar që titulli të mos mbivendoset në përmbajtjen kryesore të faqes, kjo përmbajtje kryesore vendoset në një kuti shtesë brenda kutisë kryesore dhe kjo kuti shtesë vendoset në një diferencë të lartë të barabartë me lartësinë e kutisë së titullit. Dhe në fund të faqes jepet një diferencë e sipërme negative e barabartë me lartësinë e saj - në këtë mënyrë ajo do të ngrihet mbi buzën e poshtme të dritares në lartësinë e saj të plotë. Përmbajtja e plotë e skedarit css: * {margin: 0; mbushje: 0}
html, trupi {lartësia: 100%;} trupi {
ngjyra: e zezë;
pozicioni: relativ;
}
#vogël {
min-lartësia: 100%;
diferencë: 0;
sfondi: e bardhë;
ngjyra: e zezë;
} * html #outer {lartësia: 100%;}
# kokë {
pozicioni: absolut;
maja: 0;
majtas: 0;
gjerësia: 100%;
lartësia: 70px;
sfondi: # 304a00;
tejmbushje: e fshehur;
ngjyra: e bardhe;
rreshtimi i tekstit: qendra;
} #footer {
pozicioni: relativ;
margin-top: -50px;
qartë: të dy;
gjerësia: 100%;
lartësia: 50px;
ngjyra e sfondit: # 304a00;
ngjyra: e bardhe;
rreshtimi i tekstit: qendra;
}
.mbyllja e detit {
noton: majtas;
gjerësia: 100%;
mbushja e sipërme: 71px;
} Kjo skedar duhet të ruhet me emrin që specifikuam në kodin html të faqes - styles.css.
