Paano gawin ang bahagi ng footer ng pahina ("footer") na dumikit sa ilalim na hangganan ng window - marahil ito ang pinakakaraniwang problema sa layout ng mga pahina ng site. Mayroong, syempre, mga solusyon, at maraming mga ito. Nasa ibaba ang isang paraan upang matiyak na ang footer ay palaging pinindot sa ilalim ng pahina, anuman ang dami ng nilalaman at ang uri ng browser.
Kailangan iyon
Pangunahing kaalaman sa CSS at HTML
Panuto
Hakbang 1
Gawin nating halimbawa ang isa sa mga mas tipikal na mga scheme ng pagination - magkakaroon ito ng attic (header), pangunahing block, at footer. Siyempre, kung kinakailangan, maaari kang maglagay ng maraming mga haligi sa pangunahing bloke, ngunit hindi namin ito gagawin dito, magtutuon lamang kami sa hindi pagpoposisyon sa footer. Ang HTML code ng pahina ay magsisimula sa deklarasyon ng detalye:
Sa pagitan ng mga tag at, bilang karagdagan sa pamagat ng pahina, maglalagay kami ng isang pahiwatig ng pag-encode: Pati na rin ang isang link sa isang panlabas na CSS file na naglalaman ng isang paglalarawan ng mga istilo: @import "style.css"; Hindi namin ilalagay ang ang paglalarawan ng mga estilo nang direkta sa html-code ng pahina upang maiwasan ang mga komplikasyon sa Opera browser ng ikasiyam na bersyon. Sa pagitan ng mga tag at ilagay ang istraktura ng block ng pahina. Ang una, syempre, ang block ng pamagat. Bibigyan namin ito ng tagakilala ng header upang makapagtakda ng mga estilo para sa partikular na bloke na ito:
Ang header na ito ay palaging nasa tuktok ng window.
Pagkatapos - ang pangunahing bloke ng pahina. Ito ay binubuo ng dalawang naka-pugad - panlabas (identifier - panlabas) at panloob (identifier - externalwrap):
Ito ang pangunahing bahagi.
At sa wakas, ang footer:
Ito ay footer - laging nasa ilalim ng window!
Ganito ang magiging hitsura ng kumpletong pahina:
Paano mag-press down sa footer
@import "mga style.css";
Ang header na ito ay palaging nasa tuktok ng window.
Ito ang pangunahing bahagi.
Ito ay footer - laging nasa ilalim ng window!
Hakbang 2
Ngayon ay magpatuloy tayo sa mga nilalaman ng styleheet. Ipinatutupad nito ang sumusunod na pamamaraan: ang pangunahing bloke ng pahina ay itatakda sa 100% taas, ang pamagat ay ganap na nakaposisyon, at ang footer ay medyo. Upang maiwasang mai-overlap ang heading ng pangunahing nilalaman ng pahina, ang pangunahing nilalaman na ito ay inilalagay sa isang karagdagang kahon sa loob ng pangunahing kahon, at ang karagdagang kahon na ito ay itinakda sa isang tuktok na margin na katumbas ng taas ng heading box. At ang footer ay binibigyan ng isang negatibong tuktok na margin na katumbas ng taas nito - sa ganitong paraan ay itataas sa itaas ng ilalim na gilid ng window hanggang sa buong taas nito. Buong nilalaman ng file na css: * {margin: 0; padding: 0}
html, katawan {taas: 100%;} katawan {
kulay itim;
posisyon: kamag-anak;
}
#outer {
min-taas: 100%;
margin: 0;
background: puti;
kulay itim;
} * html #outer {taas: 100%;}
#header {
posisyon: ganap;
itaas: 0;
kaliwa: 0;
lapad: 100%;
taas: 70px;
background: # 304a00;
overflow: nakatago;
kulay puti;
text-align: gitna;
} #footer {
posisyon: kamag-anak;
tuktok ng margin: -50px;
malinaw: pareho;
lapad: 100%;
taas: 50px;
kulay sa background: # 304a00;
kulay puti;
text-align: gitna;
}
.outerwrap {
lumutang pakaliwa;
lapad: 100%;
padding-top: 71px;
} Ang file na ito ay dapat na nai-save na may pangalan na tinukoy namin sa html-code ng pahina - style.css.
