Fundi në fund të faqes css. Bodrum i fiksuar

Le të kalojmë në një shembull pune

Ajo që ne shohim të metat e paraqitjes për sa i përket zbatimit të efektit të një fundi të gozhduar? Ne e shohim atë
1) fundi i faqes është brenda një blloku me id = layout, i cili nuk ka përqindje lartësi. Në teori, ai, prindërit dhe blloku i majtë i përmbajtjes duhet të vendosen në lartësinë 100%. Me këtë të fundit, lindin probleme - nuk është i përshtatshëm për këtë. Rrjedhimisht, mungon një bllok ndërshtresor ose fundi është në nivelin e gabuar. Për më tepër,
2) lartësia e footer-it është e ndryshueshme (kjo varet nga numri i elementeve në listë dhe nga madhësia e shkronjave, kjo mund të shihet jo nga HTML, por nga CSS). DHE
3) sipër #paraqitje ekziston një njësi reklamash me një lartësi fikse prej 90 px;
4) nuk ka kuti të shtrirjes në fund ose (në përgjithësi) në kuti #paraqitje(po, por mbi bllok .postimet e rrotulluara; megjithatë, ndoshta duhet t'i atribuohet futerit).

Pika 4 - do t'ju duhet të vizatoni me një skenar.
Do të duket e thjeshtë për të kuptuar pikën e tretë duke shtuar #layout (margin-top: -90px;) Por mbani mend se ky bllok mund të mos ekzistojë - ai shtypet nga një prerës banderolash, ose reklamuesit do të vendosin papritmas të mos e shfaqin atë. Ka një numër faqesh në faqe ku nuk është. Prandaj varësia marzh-majë nga një njësi reklamash është një ide e keqe. Shumë më mirë është ta vendosni brenda #paraqitje- atëherë ai nuk do të ndërhyjë me asgjë.

Pika e parë është se në mënyrë që fundi i gozhduar të funksionojë fare, duhet të vendosni bllokun e futbollit nën #paraqitje... Sidoqoftë, duke përdorur javascript, mund të zbatoni skema të tjera të futerit të gozhduar, por në çdo rast, ju duhet JS ose faqosja e saktë fillimisht për të bërë pa të.

Meqenëse nuk mund të jemi më të fortë se projektuesi i fundit i faqes, i cili "nguli" fundin brenda përmbajtjes, ne do ta shtyjmë idenë e vendosjes së saktë të footer-it në faqen tonë të ardhshme (i cili, për rrjedhojë, do të jetë "më i ftohtë" Habr!), Dhe shpërndani Habr me javascript (skriptin e përdoruesit) në gjendjet e duhura. (Le të themi menjëherë se fajin nuk e ka projektuesi i faqosjes ose komutuesi, por lloji i sitit, natyrisht, përcakton vendimin strategjik të menaxhimit të projektit.) Në këtë mënyrë nuk do të arrijmë idealin, sepse në sekondën e parë ose dy gjatë procesit të ngarkimit, faqja do të jetë me paraqitjen e gabuar. Por koncepti dhe aftësia për të tejkaluar faqen më të njohur në botën e IT janë të rëndësishme për ne.

Prandaj, në vendin e duhur në skript (në fillim, në fund të ngarkimit të faqes), ne do të shkruajmë transferimin e blloqeve të reklamave dhe fundeve të DOM në vendet e kërkuara. (Le të përgatitemi për faktin se për shkak të skripteve të përdoruesve, zgjidhja do të jetë më e ndërlikuar sesa një e pastër.)
var dQ = funksion (q) (return document.querySelector (q);) // për të shkurtër var topL = dQ ("# linjë kryesore"), lay = dQ ("# faqosje"), këmbë = dQ ("# fundi" ); if (topL && lay) // banner - brenda bllokut të përmbajtjes lay.insertBefore (topL, lay.firstChild); if (shtroj && këmbë && lay.nextSibling) // mbështjellje e futerit lay.parentNode.insertBefore (footer, lay.nextSibling);
Ne i vendosim blloqet në vendet e tyre - tani mbetet të caktojmë vetitë e nevojshme për elementët. Lartësia e footer-it do të duhet të vendoset saktësisht, thjesht sepse ne e dimë tashmë në kohën kur skripti i përdoruesit është në fuqi (fundi i ngarkimit të faqes). Për shkak të pikës së nxitjes së skriptit të përdoruesit, siç u përmend më lart, një kërcim në shfaqjen e footer-it në faqe është i pashmangshëm. Mund të përpiqeni të bëni një "fytyrë të mirë" por me një "lojë të keqe"? Per cfare? "Lojë e keqe" e faqes ju lejon të krijoni një koncept pa super-përpjekje, i cili do të jetë i mjaftueshëm për të vlerësuar cilësinë dhe nuk do të jetë i nevojshëm nëse "luani saktë" në projektin tuaj.
nëse (këmbë) (// rreshtues blloku

në fund të faqes h.apnd_el ((clss: "e qartë", appendTo: footer)); var footH = këmbë.offset Lartësia; //... dhe matni lartësinë e këmbës) nëse (topL && lay && footer && lay.nextSibling) (// rreshtimi i bllokut të lartësisë së dëshiruar në përmbajtje ("faqosje") h.apnd_el ((clss: " clear", css :(lartësia: (footH || 0) + "px"), appendTo: lay)); lay.style.minHeight = "100%"; h.addRules ("# layout (margin-fund: - " + footH + "px ! e rëndësishme) html, trupi (lartësia: 100%) ");)
Këtu e lejuam veten të përdorim një funksion të shkruar vetë h.apnd_el e cila bën përafërsisht të njëjtën gjë si në jQuery -
$("") .css ((lartësia: këmbëH || 0)). appendTo ($ (futër))
Dhe pastaj ekziston një funksion tjetër tipik i injektimit të rregullave CSS - h.addRules... Ju nuk mund të bëni pa të këtu, sepse ju duhet të deklaroni një rregull me " e rëndësishme"- vetëm për shkak të veçorive të përparësive të stilit nga skripti i përdoruesit.

Me këto pjesë kodi, ne do të jemi në gjendje të shohim fundin e gozhduar në skriptin e përdoruesit (pasi ta hedhim poshtë) dhe të kuptojmë plotësisht se si të ndërtojmë paraqitjen e faqes. Është e pakëndshme të përdoret dizajni kërcyes në baza ditore, kështu që rekomandohet ta bëni atë vetëm për demonstrim dhe testim. Në skriptin e përdoruesit të HabrAjax, unë instalova një skript të ngjashëm, duke e mbyllur me cilësimin "underFooter" (kontrollo kutinë në listën e cilësimeve përpara "gozhduar në fund të fundit"), duke filluar nga versioni 0.883_2012-09-12.

A ndikon futeri i gozhduar në nevojën për të përditësuar stilet ZenComment nëse instalohet? Po, po. Për shkak të zinxhirit kompleks të prioriteteve të stilit, në të cilin stilet e futura nga skripti i përdoruesit kanë përparësinë më të ulët, më duhej të rregulloja pak stilet e përdoruesve për mundësitë punoni me një fund të gozhduar. Nëse nuk i përditësoni stilet e përdoruesit (deri në 2.66_2012-09-12 +), fundi i faqes nuk do të funksionojë me saktësi.

Blloko rotated_post (tre postime të njohura nga e kaluara) duket më logjike në fund, kështu që në një skenar real zhvendoset edhe në fund.

Pika e dytë (nga lista e papërsosmërive në paraqitje) - arsyetimi thjesht për Habr (ato nuk zbatohen për skriptin e përdoruesit dhe përsërisin pjesërisht ato të mëparshme).

Faqet kanë një problem duke i penguar ato të krijojnë një fund të gozhduar në CSS të pastër - një lartësi e pacaktuar e fundores bazuar në madhësitë e paracaktuara të shkronjave të shfletuesit. Për të implementuar një footer në CSS, duhet të zgjidhni lartësitë relative të shkronjave, por ato mund të mos funksionojnë nëse fontet e dhëna nuk janë të disponueshme në kompjuterin e përdoruesit. Prandaj, zgjidhja duhet të përfshijë një javascript që mund të përshtatë tranzicionet në pozicionin e përafërt të footer-it në atë të saktë. Ose, pasi të keni parë pranueshmërinë e zgjidhjes së bërë në skriptin e përdoruesit në platforma të ndryshme, bëni një instalim të llogaritur të fundores së gozhduar - vëzhgimet e para tregojnë se zgjidhja është praktike.

Përfundim: ju mund ta rregulloni plotësisht paraqitjen në Habré, por për këtë ju nevojitet një projektues i paraqitjes i cili e kupton qartë sjelljen e paraqitjes dhe i vendos blloqet në rendin e duhur. (Tani fundi dhe banderola e sipërme janë "në vendin e gabuar" dhe jo vetëm stilet për të marrë një fund të gozhduar.) Mund të bëni pa JS nëse vendosni lartësinë e futbollit në njësi relative, duke marrë një diferencë për fontin pasiguria.

Zbatimi

Nëse aktivizoni HabrAjax 0.883+, do të shohim punën e "futerit të gozhduar". Ai përshtatet në lartësi duke përdorur skriptet. Kjo ju lejon të vlerësoni se sa më mirë duken faqet me fund të gozhduar në krahasim me ato të rregullta. Stilet e përdoruesve të ZenComment janë të pajtueshme me skriptet, por që fundi i gozhduar të funksionojë siç duhet, duhet të instaloni versionin ZenComment 2.66_2012-09-12 + me to.

Fakte të Sjelljes së Zbatimit

Shamanizmi me footer, stile dhe skenarë është shamanizëm (vetëm për t'u mbështetur nga teoria). Sjellja është paksa e ndryshme në shfletues të ndryshëm, por në disa vende është e papritur. Pa skriptet e përdoruesve dhe rirregullimet e bllokut, rezultatet do të jenë të ndryshme. Kjo është ajo që dhanë eksperimentet me zbatimin në skriptin e përdoruesit.

1) Firefox - mungesë e papritur e kërcimit në fund të faqes. Është e çuditshme që ato nuk janë aty - interpretimi ndodh pasi vendoset fundi në fund.

2) Chrome - befasoi ai me një "rrotullim endacak" - faqet i shtohen hapësira boshe në fund me një periudhë një herë në sekondë - diçka e gabuar po ndodh me llogaritjen e lartësive. Trajtohet duke shkruar html, body (lartësia: 100%) në stilin e përdoruesit, por pa garanci se do të funksionojë gjithmonë. Është më e sigurt të kontrolloni nëse dokumenti nuk e kalon lartësinë e dritares, dhe nëse jo, atëherë lëvizni fundin, përndryshe asgjë. Me kërcim - gjithçka është në rregull, është.

3) Opera - nuk ka kërcime (v. 12.02) në ngarkimin e faqes së parë, por një ringarkim i nxituar mund të tregojë një kërcim në fund të faqes. Përndryshe, ajo çon jo më pak saktë se Fx.

Epo, do t'ju duhet të mësoni posaçërisht Chrome të sillet siç duhet (me një skenar) dhe në këtë formë të hapni versionin për rishikim. Prandaj, faqja në skriptin e përdoruesit është pak më e ndërlikuar se ajo e dhënë në artikull.

Duhet të kujtojmë se ky nuk është një zbatim i plotë - nuk merr parasysh, për shembull, rastet e ndryshimit të madhësisë së dritares nga përdoruesi. Mund të gjeni gjithashtu kombinime të rralla (në praktikë) të ndryshimit të lartësisë së fundores para dhe pas lëvizjes, ku logjika do të fillojë të mos funksionojë pa sjellë shqetësime. Disavantazhet u lanë qëllimisht, sepse vërehet ekuilibri i kompleksitetit të rishikimit dhe kohëzgjatja e zgjidhjes.

Si rezultat, doli të ishte një skemë pune mjaft e zbatueshme, të paktën për kompjuterët e shpejtë të palëvizshëm. Nëse gjendet një sjellje e gabuar e fusterit, cilësimi "underFooter" duhet të çaktivizohet.

Për cilat faqe është e dobishme kjo?

Në një faqe standarde, pa stile përdoruesi, edhe faqet e shkurtra të pyetjeve dhe përgjigjeve rezultojnë të jenë më të gjata se 1500 piksele, gjë që në shumicën e rasteve është e padukshme me monitorët horizontalë. Por edhe me monitorët e zakonshëm, shpesh hasen faqet personale të përdoruesve me një lartësi prej rreth 1300 pikselësh, ku një fund i pandërprerë shfaqet në të gjithë lavdinë e tij. Një numër faqesh në cilësimet e përdoruesit nuk janë gjithashtu shumë të gjata.

Nëse përdorni stilet e përdoruesve të ZenComment, ato zvogëlojnë shumë lartësinë e kërkuar të faqes dhe skripti i përdoruesit HabrAjax mund të mos shfaqë disa ose të gjitha shiritat anësor në shiritin anësor. Prandaj, me skriptet dhe stilet, efekti i një fundi të pavendosur vërehet dukshëm më shpesh. Prandaj, është logjike që rregullimi i footer-it u shfaq për herë të parë në HabrAjax. Por edhe një faqe normale ka një numër faqesh ku një fund i gozhduar do të ishte i dobishëm.

A do të ketë mbështetje?

Sjellja e faqes gjatë vitit të kaluar tregon se zhvilluesit (dhe për rrjedhojë menaxhimi) kanë filluar të zbatojnë veçori që më parë ekzistonin vetëm në skriptet e përdoruesve dhe stilet e përdoruesve. Për shembull, në fillim të vitit kam shkruar, ku kam mbledhur shumë dëshira të vogla. Gjashtë muaj më vonë, iu ktheva dhe vura në dukje me kënaqësi (të drejtë në tekst; mund të shihni "UPD" dhe datat) se një sërë veçorish të përshkruara si dëshira ishin zbatuar tashmë në sajt.

Më pas, le të shohim "shigjetat" në vend të kutive për vlerësimin e komenteve. Ata u shfaqën në përdoruesit ("Prettifier") rreth 3 vjet më parë dhe u morën në ZenComment rreth 2 vjet më parë. Rreth 2-3 muaj më parë u shfaqën në faqe. Fillon të besojë se pas një kohe shigjetat do të përhapen në një distancë, siç bëhet në ZenComment (një shigjetë në të majtë të numrit, e dyta në të djathtë), në mënyrë që të humbasë më pak.

stilet e përdoruesit

HabrAjax

Shto etiketa

• Tutorial

Kushdo që është mësuar me faqet e plota të faqeve të internetit, preferon pamjen e "gozhduar" (ngjitëse, ngjitëse) në fund të faqes së fundit të faqes. Por ka dy probleme në internet: fushat e hyrjes që nuk rriten poshtë dhe fundet që nuk janë gozhduar (në fund të dritares). Për shembull, kur hapim faqe me lartësi të shkurtër si habrahabr.ru/settings/social, është menjëherë e habitshme që informacioni i krijuar për të qenë në fund të portit të shikimit i përmbahet përmbajtjes dhe është diku në mes, apo edhe në pjesa e sipërme e dritares kur poshtë saj është bosh.

Pra, në vend të.
Ky udhëzues për dizajnerët fillestarë të paraqitjes do t'ju tregojë se si të bëni një fund të "gozhduar" në 45 minuta, duke korrigjuar të metat madje edhe të një botimi kaq të respektuar si Habr, dhe të konkurroni me të si një përmbushje e projektit tuaj premtues.

Le të shikojmë zbatimin e një lloji të fundit të gozhduar të marrë nga rrjeti dhe të përpiqemi të kuptojmë se çfarë po ndodh. css-tricks.com/snippets/css/sticky-footer
CSS:
* (margin: 0; mbushje: 0;) html, body, #wrap (lartësia: 100%;) body> #wrap (lartësia: automatik; min-lartësia: 100%;) #main (padding-bottom: 150px; ) / * duhet të jetë e njëjtë me lartësinë e këmbës * / #footer (pozicioni: relative; margjina-lart: -150 px; / * vlera negative e lartësisë së futbollit * / lartësia: 150 px; e qartë: të dyja;) / * CLEAR FIX * / .clearfix: after (përmbajtja: "."; shfaqja: bllok; lartësia: 0; qartë: të dyja; dukshmëria: e fshehur;) .clearfix (shfaq: inline-block;) / * Fshihet nga IE-mac \ * / * html .clearfix (lartësia: 1%;) .clearfix (ekrani: bllok;) / * Fundi i fshehjes nga IE-mac * /
HTML:

Nuk ka gjasa që të gjithë, madje edhe ata që njohin CSS, duke parë këtë kod, do të kuptojnë parimet dhe do të modifikojnë me besim një projekt kompleks. Çdo hap në anën do të çojë në efekte anësore. Arsyetimi dhe ndërtimi i faqes më poshtë synon t'ju japë më shumë njohuri mbi rregullat e CSS.

Le të fillojmë me teorinë

Zbatimi i zakonshëm i një fundi të gozhduar mbështetet në vetinë unike të CSS2 që elementët janë pasardhës të menjëhershëm. TRUPI- Mbani përqindjen e lartësisë ( lartësia: 100% ose një tjetër) në lidhje me dritaren, nëse të gjithë prindërit e tyre kanë të njëjtën lartësi në përqindje duke filluar nga etiketa HTML... Më parë, pa doctypes, por tani në Quirks Mode, lartësitë e përqindjes së elementeve mbështeten në çdo nivel, dhe në doctypes moderne - vetëm brenda elementeve të specifikuara në përqindje. Prandaj, nëse bëjmë një bllok përmbajtjeje (le ta quajmë atë #paraqitje) duke pasur 100% lartësi, do të lëvizë sikur të ishte një dritare. E gjithë përmbajtja (transmetimi) vendoset në të, përveç fundit dhe ndoshta kokës.

Një fund i faqes vendoset pranë këtij blloku dhe i jepet 0 piksel lartësi. Në përgjithësi, ju mund të ndiqni #paraqitje vendosni sa më shumë blloqe që dëshironi, por të gjithë duhet të jenë ose nga 0 piksel në lartësi, ose jashtë rrjedhës së dokumentit (jo pozicioni: statik). Dhe ka një truk tjetër të rëndësishëm që përdoret zakonisht. Nuk është e nevojshme të bëhet lartësia e barabartë me 0. Mund ta bëni lartësinë fikse, por ta zbrisni atë nga blloku kryesor duke përdorur veçorinë margjina-fund: - (lartësia);.

Në terma njerëzorë, stilet krijojnë një "xhep" të zbrazët në fund, në të cilin futet fundi i faqes dhe gjithmonë rezulton të jetë ose ngjitës në kufirin e poshtëm të dritares, ose në kufirin e poshtëm të dokumentit nëse dokumenti është më e lartë në lartësi se lartësia e dritares. Ka shumë implementime të fundeve në internet dhe në Habré, me sukses të ndryshëm në të gjithë shfletuesit. Le të vazhdojmë ta ndërtojmë vetë, duke përdorur paraqitjen e Habrit si një "kalë pune".

Që nga fundi i bllokut #paraqitje- ky është një xhep, për footer-in duhet të jetë bosh, duke mos shfaqur objektet e faqes. Dhe këtu hasim një kufizim tjetër - nuk mund të bëjmë një xhep bosh në kurriz të mbushje v #paraqitje, sepse atëherë do të bëhet më shumë se 100%. Nuk do të kursejë dhe diferencë- zbrazëtia duhet të bëhet në kurriz të vetive të elementeve të mbivendosur. Përveç gjithçkaje, është e nevojshme të sigurohet që të mos dalë nën kufirin e bllokut të elementeve lundrues, gjë që bëhet, për shembull, nga një bllok

, ku .e qartë (e qartë: të dyja)... Është e rëndësishme që ose kjo " lartësia"ishte fikse, ose në të njëjtat njësi relative, ose do ta kishim llogaritur në procesin e ndryshimit të faqes. Zakonisht është i përshtatshëm për të kombinuar këtë kuti të shtrirjes me vendosjen e lartësisë së kërkuar për të.

Le të shohim strukturën e faqeve të eksperimentit tonë. Mënyra më e lehtë për ta bërë këtë është të hapni dritaren e Firebug ose dritare të ngjashme ("Vegla Zhvilluesish" (Ctrl-F12)) në Chrome.