Ang "Footer" ay karaniwang pinakahuling bloke ng isang layout ng web page. Ang pinakakaraniwang paghihirap sa pagposisyon ng footer na ito ay upang palaging nakaposisyon sa ilalim ng window, anuman ang kabuuan ng pahina o uri ng browser. Mayroong ilang mga solusyon sa problema mula pa noong oras ng napakalaking paglipat upang harangan ang layout, at ang isa sa mga ito ay ibinibigay sa ibaba.
Kailangan iyon
Pangunahing kaalaman sa CSS at HTML
Panuto
Hakbang 1
Gawin nating batayan ang pinakakaraniwang scheme ng layout ng pahina - tatlong mga bloke ang inilagay ang isa sa itaas ng isa pa. Ang tuktok (header) ay dapat palaging nakahanay sa tuktok na hangganan ng window, sa ilalim (footer) - sa ilalim na hangganan, at ang pangunahing (katawan) ay dapat palaging punan ang lahat ng puwang sa pagitan nila. Ang source code ay dapat maglaman ng isang link sa XHTML 1.0 Transitional detalye, at ang paglalarawan ng mga estilo ay dapat ilagay sa isang panlabas na CSS file (upang maiwasan ang mga problema sa Opera 9. XX). Ang paglalarawan ng HTML ng istraktura ay dapat ilagay sa pangunahing katawan ng pahina. Magsisimula ito, syempre, mula sa tuktok na bloke, kung saan ang tag ay dapat ilagay ang isang katangian ng identifier na may halaga, halimbawa, divHead:
Header block.
Ang pangunahing bloke ay dapat na binubuo ng isang pares ng mga pinugad na bloke. Ang panlabas ay bibigyan ng divOut identifier, at ang panloob - divContent:
Pangunahing nilalaman.
Ang footer ay nakatakda sa divFoot:
Footer ng pahina.
Hakbang 2
Ang kumpletong HTML code ng pahina ay dapat magmukhang ganito:
Tatlong bloke
@import "style.css";
Ito ay isang header block.
Pangunahing nilalaman.
Ito ang footer ng pahina.
Hakbang 3
Ipinatutupad ng paglalarawan ng estilo ang sumusunod na mekanismo ng layout: ang gitnang bloke (divOut) ay nakatakda sa taas na 100%, ang tuktok na bloke (divHead) ay magkakaroon ng ganap na pagpoposisyon, at sa ilalim ng isa - na kamag-anak. Sa pangunahing bloke ng nilalaman (divContent), dapat mayroong isang libreng puwang sa tuktok na katumbas ng taas ng heading block upang hindi ito mag-overlap sa pangunahing nilalaman ng pahina. At ang ibabang bloke (footer) ay dapat magkaroon ng isang negatibong margin sa itaas, katumbas ng taas ng bloke na ito. Itataas ito sa itaas ng ilalim na hangganan ng window ng browser. Ang mekanismong ito ay maaaring ipatupad gamit ang isang css file na may sumusunod na nilalaman: * {margin: 0; padding: 0}
html, katawan {taas: 100%;} katawan {
posisyon: kamag-anak;
kulay: # 000;
}
#divOut {
margin: 0;
min-taas: 100%;
background: #FFF;
kulay: # 000;
}
* html #divOut {taas: 100%;}
#divHead {
posisyon: ganap;
kaliwa: 0;
itaas: 0;
lapad: 100%;
taas: 80px;
background: # 2F5000;
overflow: nakatago;
text-align: gitna;
kulay: #FFF;
} #divFoot {
posisyon: kamag-anak;
malinaw: pareho;
tuktok ng margin: -60px;
taas: 60px;
lapad: 100%;
kulay sa background: # 2F5000;
text-align: gitna;
kulay: #FFF;
}
.divContent {
lapad: 100%;
lumutang pakaliwa;
padding-top: 81px;
} Ang pangalang tinukoy mo para sa mga styleheet sa HTML code ay style.css.
