Jinsi ya kufanya sehemu ya futa ya ukurasa ("footer") ibaki kwenye mpaka wa chini wa dirisha - hii labda ni shida ya kawaida katika mpangilio wa kurasa za wavuti. Kuna, kwa kweli, suluhisho, na ziko kadhaa. Hapa chini kuna njia moja ya kuhakikisha kuwa kijachini kinabanwa kila wakati chini ya ukurasa, bila kujali kiwango cha yaliyomo na aina ya kivinjari.
Ni muhimu
Ujuzi wa kimsingi wa CSS na HTML
Maagizo
Hatua ya 1
Wacha tuchukue moja ya miradi ya kawaida ya upagani kama mfano - itakuwa na dari (kichwa), kizuizi kikuu, na kijachini. Kwa kweli, ikiwa ni lazima, unaweza kuweka safu wima kadhaa kwenye kizuizi kuu, lakini hatutafanya hapa, tutazingatia tu kutosimamisha miguu. Nambari ya HTML ya ukurasa itaanza na tamko la vipimo:
Kati ya vitambulisho na, pamoja na kichwa cha ukurasa, tutaweka kiashiria cha usimbuaji: Pamoja na kiunga cha faili ya nje ya CSS iliyo na maelezo ya mitindo: @import "styles.css"; Hatutaweka maelezo ya mitindo moja kwa moja kwenye html-code ya ukurasa ili kuepusha shida na kivinjari cha Opera cha toleo la tisa. Kati ya vitambulisho na weka muundo wa block wa ukurasa. Ya kwanza, kwa kweli, ni kichwa cha kichwa. Tutakupa kitambulisho cha kichwa ili kuweza kuweka mitindo ya kizuizi hiki:
Kichwa hiki huwa juu ya dirisha kila wakati.
Halafu - kizuizi kikuu cha ukurasa. Itakuwa na mbili zilizo na viota - nje (kitambulisho - nje) na ndani (kitambulisho - kitambaa cha nje):
Hii ndio sehemu kuu.
Na mwishowe, kijachini:
Ni mguu - daima chini ya dirisha!
Ukurasa kamili utaonekana kama hii:
Jinsi ya kubonyeza chini kwenye kijachini
@ kuagiza "mitindo.css";
Kichwa hiki huwa juu ya dirisha kila wakati.
Hii ndio sehemu kuu.
Ni mguu - daima chini ya dirisha!
Hatua ya 2
Sasa hebu tuendelee kwenye yaliyomo kwenye lahaja ya mitindo. Inatekeleza mpango ufuatao: kizuizi cha ukurasa kuu kitawekwa kwa urefu wa 100%, kichwa kitawekwa vizuri kabisa, na kijachini kitakuwa sawa. Ili kuzuia kichwa kutoka kwa kuingiliana kwa yaliyomo kwenye ukurasa, yaliyomo kuu huwekwa kwenye kisanduku cha ziada ndani ya kisanduku kikuu, na kisanduku hiki cha nyongeza kimewekwa pembezoni sawa na urefu wa kisanduku cha kichwa. Na mguu unapewa margin ya juu hasi sawa na urefu wake - kwa njia hii itainuliwa juu ya ukingo wa chini wa dirisha hadi urefu wake kamili. Yaliyomo kwenye faili ya css: * {margin: 0; padding: 0}
html, mwili {urefu: 100%;} mwili {
rangi: nyeusi;
msimamo: jamaa;
}
#outer {
urefu wa min: 100%;
margin: 0;
historia: nyeupe;
rangi: nyeusi;
} * html #outer {urefu: 100%;}
kichwa #
msimamo: kabisa;
juu: 0;
kushoto: 0;
upana: 100%;
urefu: 70px;
historia: # 304a00;
kufurika: kufichwa;
rangi: nyeupe;
andika-maandishi: katikati;
} #mchezaji wa miguu {
msimamo: jamaa;
margin-juu: -50px;
wazi: zote mbili;
upana: 100%;
urefu: 50px;
rangi ya asili: # 304a00;
rangi: nyeupe;
andika-maandishi: katikati;
}
.kufunika
kuelea: kushoto;
upana: 100%;
juu-juu: 71px;
} Faili hii inapaswa kuhifadhiwa na jina ambalo tumeelezea kwenye html-code ya ukurasa - styles.css.
