Lidhni fundin në fund të faqes css. Si të përdorni CSS për të shtyrë fundin në fund të dritares së shfletuesit

Le të kalojmë në një shembull pune

Pika 4 - do t'ju duhet ta vizatoni me një skenar.
Duket e lehtë për t'u marrë me pikën e tretë duke shtuar #layout(margin-top:-90px;) Por mbani mend se ky bllok mund të mos ekzistojë - ai shtypet nga prerja e banderit, ose reklamuesit vendosin papritmas të mos e shfaqin atë. Ka një numër faqesh në sit ku nuk është. Prandaj varësia marzh-majë nga një bllok reklamash është një ide e keqe. Është shumë më mirë 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, ju duhet të vendosni një bllok të fundit poshtë #paraqitje. Megjithatë, me ndihmën e javascript ju mund të zbatoni skema të tjera të gozhduara të footer-it, por në çdo rast ju duhet JS ose paraqitje e saktë fillimisht për të bërë pa të.

Meqenëse nuk mund të jemi më të fortë se projektuesi më i fundit i paraqitjes së faqes në internet, i cili "goditi" fundin brenda përmbajtjes, ne do ta lëmë mënjanë idenë e vendosjes së duhur të futerit në faqen tonë të internetit të ardhshme (i cili, për rrjedhojë, do të jetë "më i ftohtë" se Habr!), dhe ne do ta zbërthejmë Habrin me javascript (përdorues) në kushtin e duhur. (Le të themi menjëherë se fajin nuk e ka projektuesi ose ndërruesi i faqosjes, 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ë sekonda e parë ose dy gjatë procesit të ngarkimit, faqja do të ketë një paraqitje të gabuar. Por ajo që është e rëndësishme për ne është koncepti dhe mundësia për të tejkaluar në cilësi faqen e internetit më të njohur në botën e IT.

Prandaj, në vendin e duhur në skript (në fillim, në fund të ngarkimit të faqes), ne do të shkruajmë transferimet e blloqeve të reklamave DOM dhe fundin në vendet e duhura. (Le të jemi të përgatitur për faktin se, për shkak të skripteve të përdoruesve, zgjidhja do të jetë më e ndërlikuar se një zgjidhje e pastër.)
var dQ = funksion(q) (ktheje dokument.querySelector(q);) //për shkurtimin var topL = dQ("#topline"), lay = dQ ("#paraqitje"), këmbë = dQ ("#footer" ); if(topL && lay) //banner - brenda bllokut të përmbajtjes lay.insertBefore(topL, lay.firstChild); if(lay && foot && lay.nextSibling) //lëvizja e footer-it lay.parentNode.insertBefore(footer, lay.nextSibling);
Ne i kemi vendosur blloqet në vendet e tyre - tani mbetet vetëm t'u caktojmë elementet vetitë e nevojshme. Lartësia e footer-it do të duhet të vendoset saktësisht, thjesht sepse ne tashmë e dimë atë në kohën kur skripti i përdoruesit është aktiv (fundi i ngarkimit të faqes). Për shkak të pikës së nxitjes së shkrimit 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ë vishni një "fytyrë të mirë", por me një "lojë të keqe"? Per cfare? "Loja e keqe" e faqes ju lejon të krijoni një koncept pa përpjekje shtesë, i cili do të jetë i mjaftueshëm për të vlerësuar cilësinë dhe nuk do të jetë i nevojshëm për "lojën e duhur" në projektin tuaj.
if(foot)( //block-aligner

Me këto pjesë kodi, ne do të jemi në gjendje të shohim fundin e gozhduar në shkrimin e përdoruesit (pasi të hedhim poshtë) dhe të kuptojmë plotësisht se si të ndërtojmë paraqitjen e faqes. Përdorimi i një modeli kërcimi në baza ditore është i pakëndshëm, 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 "footer gozhduar në fund"), duke filluar me versionin 0.883_2012-09-12.

A ndikon gozhdimi i fundit të faqes në nevojën për të përditësuar stilet ZenComment nëse ato janë të instaluara? 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, na u desh të rregullonim pak stilet e përdoruesve për mundësitë duke punuar me futboll të gozhduar. Nëse nuk i përditësoni stilet tuaja të përdoruesve (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 me një footer, kështu që në skenarin real zhvendoset edhe në fund.

Pika e dytë (nga lista e mangësive të paraqitjes) është një diskutim thjesht për Habr (nuk vlen për skriptin e përdoruesit dhe përsërit pjesërisht ato të mëparshme).

Faqet kanë një problem që i pengon ata të bëjnë një fund të gozhduar duke përdorur CSS të pastër - një lartësi e pacaktuar e fundores në varësi të madhësive të paracaktuara të shkronjave në shfletues. Për të zbatuar një footer duke përdorur CSS, duhet të zgjidhni lartësitë relative të shkronjave, por ato mund të mos funksionojnë nëse kompjuteri i përdoruesit nuk ka fontet e kërkuara. Prandaj, zgjidhja duhet të përfshijë një JavaScript që mund të rregullojë pozicionin e përafërt të footer-it në pozicionin e saktë duke përdorur tranzicionet. Ose, pasi të shikoni pranueshmërinë e zgjidhjes së bërë në një skenar përdoruesi në platforma të ndryshme, bëni një instalim të llogaritur të një fundi të gozhduar - vëzhgimet e para tregojnë se zgjidhja është praktike.

Përfundim: është e mundur të hartohet plotësisht një plan urbanistik 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. (Aktualisht, fundi dhe banderola e sipërme janë "në vendin e gabuar" dhe jo në atë mënyrë që thjesht të mund të stiloni fundin e gozhduar.) Ju mund të bëni pa JS nëse vendosni lartësinë e futbollit në njësi relative, duke marrë disa vend për pasiguri të shkronjave.

Zbatimi

Fakte rreth sjelljes së zbatimit

1) Firefox - mungesë e papritur e kërcimeve në fund. Është e çuditshme që ato nuk janë atje - interpretimi ndodh pasi fundi është vendosur në fund.

2) Chrome - më befasoi me "lëvizjen endacake" - hapësira boshe në fund i shtohen faqes me një periudhë një herë në sekondë - diçka e gabuar po ndodh me llogaritjen e lartësive. Zgjidhja është të shkruani html,body(lartësia:100%) në stilin e përdoruesit, por nuk ka asnjë garanci që do të funksionojë gjithmonë. Shtë më e besueshme të kontrolloni nëse dokumenti nuk e kalon lartësinë e dritares, dhe nëse nuk e kalon, atëherë lëvizni fundin, përndryshe - asgjë. Kërcimi është në rregull, ekziston.

3) Opera - nuk ka kërcime (v. 12.02) kur faqja ngarkohet për herë të parë, por një ringarkim i nxituar mund të tregojë një kërcim në fund të faqes. Përndryshe ai sillet jo më pak saktë se Fx.

Epo, do t'ju duhet të mësoni posaçërisht Chrome të sillet në mënyrë korrekte (me një skenar) dhe të hapni versionin në këtë formë për shfaqje. Prandaj, seksioni në skriptin e përdoruesit është pak më i ndërlikuar se ai i 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 fillon të dështojë pa sjellë shqetësime. Mangësitë u lanë qëllimisht, sepse u ruajt një ekuilibër midis kompleksitetit të përmirësimit dhe natyrës së përkohshme të zgjidhjes.

Si rezultat, ne morëm një skemë funksionimi plotësisht të zbatueshme, të paktën për kompjuterët desktop të shpejtë. Nëse zbulohet një sjellje e gabuar e futbollit, cilësimi "underFooter" duhet të çaktivizohet.

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

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 blloqet anësore në shiritin anësor. Prandaj, me skriptet dhe stilet, efekti i një fundi të palidhur vërehet dukshëm më shpesh. Prandaj, është logjike që rregullimi i footer-it u shfaq në HabrAjax për herë të parë. Por një faqe interneti e rregullt ka gjithashtu 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) filluan të prezantojnë 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ë, u ktheva në të dhe isha i kënaqur të vëreja (drejt në tekst; ju 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ë katrorëve për komentet e vlerësimit. Ato u shfaqën në usersils ("Prettifier") rreth 3 vjet më parë dhe u miratuan në ZenComment rreth 2 vjet më parë. Rreth 2-3 muaj më parë ata u shfaqën në faqe. Dikush fillon të besojë se pas njëfarë kohe shigjetat do të vendosen në një distancë të caktuar, 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.

Përshëndetje, të dashur lexues të faqes së blogut. Vazhdojmë temën e paraqitjes së bllokut, e cila u nis dhe vazhdoi në tre artikujt e mëparshëm. Në parim, ne kemi arritur tashmë të krijojmë një paraqitje të sitit me dy dhe tre kolona, ​​dhe madje kemi arritur të marrim parasysh nuancat e krijimit të një paraqitjeje të lëngshme.

Për më tepër, në artikujt e parë kushtuar paraqitjes së faqes në internet (), disa konceptet bazë webmastering, pa kuptuar të cilat do të ishte mjaft e vështirë për të kuptuar nuancat.

Çfarë problemesh patëm me paraqitjen e faqes sonë të internetit?

Sot do të përpiqemi të zgjidhim një problem të vogël që mund të lindë me paraqitjen që kemi krijuar më parë. Më shpesh, kjo situatë lind kur e shikoni atë monitorë të mëdhenj(Me rezolucion të lartë) dhe kur shfaq një faqe me një sasi të vogël informacioni.

Në këtë rast, mund të rezultojë se futeri nuk do të shtypet në fund të ekranit, por do të vendoset pothuajse në lartësinë e tij të mesme, e cila në shumicën e rasteve do të duket e shëmtuar dhe jo estetikisht e këndshme.

Megjithatë, për mendimin tim, është e nevojshme të shtypni fundin në fund të paraqitjes së faqes, dhe kjo do të jetë veçanërisht e vërtetë në rastin kur lartësia e faqes është më e vogël se lartësia e ekranit të përdoruesit. Kjo mund të paraqitet skematikisht si kjo:

ato. sjellje korrekte e futerit për rastin e një sasie të vogël informacioni në faqe dhe ekran i madh përdoruesi do të jetë si më poshtë:

Për ta zbatuar këtë, duhet të kryejmë një numër manipulimesh me kodin e paraqitjes sonë. Për më tepër, ne do të bëjmë ndryshime jo vetëm në skedarin e stilit Stilimi CSS Style.css, por edhe në Index.html që përmban Kodi HTML dhe formuese Blloqe div. Por gjërat e para së pari.

Si shembull, ne do të përdorim paraqitjen e faqes së internetit me tre kolona që krijuam më parë. Në këtë rast, Index.html do të duket kështu:

Dhe në skedarin Style.css janë shkruar duke ndjekur CSS Vetitë:

Trupi, html ( margjina:0px; mbushje:0px; ) #maket ( gjerësia:800px; margjina:0 automatik; ) #header(ngjyra e sfondit:#C0C000; ) #left(ngjyra e sfondit:#00C0C0; gjerësia:200px float:majtas; (ngjyra e sfondit:#FFC0FF; e qartë: të dyja;)

Epo, vetë faqosja dukej diçka si kjo:

Siç mund ta shihni, futeri nuk shtypet në fund dhe, për rrjedhojë, nuk i plotëson kërkesat tona (ai ndodhet gjithmonë nën kolonën më të ulët), kështu që do të duhet të bëjmë rregullime në kod. E njëjta gjë mund të bëhet për një plan urbanistik me dy kolona, ​​dhe për një paraqitje gome gjithashtu. Metoda është universale.

Si të shtyni fundin në fund të paraqitjes së faqes në internet

Pra, duhet ta zhvendosim kontejnerin Div me fundin në fund të ekranit. Për ta bërë këtë, së pari do t'ju duhet të vendosni lartësinë e të gjithë faqes në njëqind për qind (ajo do të zërë të gjithë ekranin). Kjo do të jetë e nevojshme për të ndryshuar më pas madhësinë e bllokut kryesor me paraqitjen në 100%.

E gjithë përmbajtja e faqes së faqes vendoset në etiketat Body hapëse dhe mbyllëse dhe për këtë arsye ne duhet të shtojmë në Style.css për Etiketa e trupit Një tjetër veçori CSS që vendos lartësinë në 100%:

Trupi, html (diferencë: 0 px; mbushje: 0 px; lartësi: 100%; )

Aktiv pamjen Kjo nuk do të ketë ende ndonjë efekt, por tani blogu kryesor mund të shtrihet në lartësinë e plotë të ekranit. ato. ishte një lloj etape përgatitore.

Karakteristikat themelore të CSS, nëse dëshironi, mund t'i shikoni. Tani le të vendosim kontejnerin Div që përmban të gjithë paraqitjen tonë në një lartësi minimale prej 100%:

Gjithashtu dua ta theksoj (div me id="maket"). Për ta bërë këtë, unë do t'i jap një kornizë duke përdorur veçorinë përkatëse Border():

Kufiri: Vetia e zezë e ngurtë 3 px ju lejon të vendosni për këtë kontejner kornizë solide(i ngurtë) 3 piksele të trasha në të zezë. Kjo do t'ju lejojë të shihni qartë se kontejneri me paraqitjen është shtrirë në të gjithë lartësinë e ekranit, edhe me një sasi të vogël informacioni në faqe:

Tani do të na duhet të nxjerrim bllokun e futbollit nga ena e përgjithshme dhe ta vendosim poshtë, menjëherë pas atij të përgjithshëm. Çfarë do të japë? Dhe fakti që, më në fund, fundi i faqes në paraqitje do të denjojë të zbresë dhe nuk do të shtypet, si më parë, në kolonën e tij më të gjatë. Në këtë rast, Index.html do të duket kështu:

Ju lutemi vini re se blloku me fundin nuk ndodhet më brenda kontejnerit të përgjithshëm (maket) dhe për këtë arsye gjerësia e tij nuk rregullohet më nga vetitë CSS të specifikuara për maket në skedarin Style.css. Gjerësia e këmbës do të shtrihet në të gjithë ekranin, por do të vazhdojë të jetë e vendosur në fund të ekranit, menjëherë poshtë bllokut kryesor:

Por përsëri lind një problem, sepse për të parë fundin, tani duhet të lëvizni ekranin në shfletues (shihni shiritin e lëvizjes në foton e mësipërme).

Kjo ndodh sepse kontejneri kryesor (maket) zë të gjithë lartësinë e ekranit (kjo përcaktohet nga vetia min-lartësia: 100%), dhe fundi ndodhet menjëherë pas tij dhe për ta parë atë duhet të lëvizni, i cili nuk është shumë i përshtatshëm dhe funksional.

Ju mund ta zgjidhni këtë problem duke vendosur një mbushje negative për kontejnerin Div me fundin në mënyrë që të lëvizë lart me një distancë të barabartë me lartësinë e saj. Në këtë rast, kontejneri i futbollit do të mbivendoset me atë kryesor dhe do të përshtatet në lartësinë e ekranit të shfletuesit (d.m.th., nuk do t'ju duhet të lëvizni për ta parë).

Por për të vendosur një kompensim negativ nga lart, duhet të dini pikërisht këtë lartësi të këmbës, por ne nuk e dimë ende.

Prandaj, së pari do të vendosim lartësinë e kontejnerit që përmban fundin duke vendosur veçorinë përkatëse në Style.css:

#footer (ngjyra e sfondit:#FFC0FF; qartë: të dyja; lartësia: 50 px; )

Dhe pastaj vendosëm një diferencë negative për të në krye në një lartësi të barabartë me lartësinë e saj:

Kjo do të lejojë që fundi të ngrihet saktësisht në lartësinë e tij dhe kështu të përshtatet në ekranin e shfletuesit (tani mund të hiqni CSS pronë kufitare: 3px e zezë e ngurtë nga rregulli për maket, në mënyrë që trashësia e kornizës të mos pengojë të gjithë paraqitjen tonë, duke përfshirë fundin, të përshtatet në lartësinë e ekranit):

Siç mund ta shihni, tani shiriti i lëvizjes nuk shfaqet në shfletues dhe e gjithë faqosja jonë e faqes me blloqe me tre kolona përshtatet në një ekran (në rast se ka pak informacion në faqe) dhe ka një fund të vendosur në fund. . E cila është pikërisht ajo që duhej të bënim.

Fusim spacer dhe luftojmë Internet Explorer

Por lind një problem, i cili do të shfaqet vetëm kur të ketë më shumë informacion në faqen e paraqitjes dhe mund të lindë situata e mëposhtme:

Rezulton se një situatë mund të lindë kur informacioni në njërën nga kolonat e paraqitjes mbivendoset me fundin, gjë që nuk do të duket bukur. Kjo ndodh për shkak të mbushjes famëkeqe negative që vendosëm për të dhe që ndihmoi në ngritjen e bodrumit tonë kundër kontejnerit kryesor të paraqitjes.

ato. Rezulton se në pjesën e poshtme të ekranit ka dy blloqe që mbivendosen me njëri-tjetrin në zonën e bodrumit.

Zgjidhja për këtë problem është shtimi i një kontejneri të ri bosh Div (i ashtuquajturi ndarës) në kontejnerin kryesor të paraqitjes sonë (maket), në vendin ku ishte vendosur më parë blloku me fundin.

Duke e vendosur këtë kontejner të ri në një lartësi të barabartë me lartësinë e footer-it, ne mund të shmangim përplasjen e informacionit nga kontejneri kryesor me bllokun me fundin. Le t'i caktojmë një ID () këtij kontejneri të quajtur Rasporka dhe si rezultat Index.html i paraqitjes sonë me tre kolona do të duket si:

Dhe në Style.css do të shkruajmë për këtë ( , e cila vendos lartësinë e kësaj kontejneri ndarës të barabartë me lartësinë e bodrumit:

#rasporka (lartësia: 50px; )

Si rezultat, fundi do të shtypet nga poshtë jo në informacionin që përmban kontejneri kryesor (për shembull, teksti në kolonën më të lartë), por në një zonë të barabartë me lartësinë e fundores me një enë ndarëse që nuk përmban informacion .

Në këtë mënyrë shmangim përplasjet dhe shtrembërimet në paraqitjen tonë me tre kolona. Gjithçka do të jetë e qartë dhe e bukur (delikate dhe fisnike):

Siç e përmenda më lart, gjerësia e footer-it tani duhet të vendoset veçmas, sepse ... ky enë nuk është më pjesë e atij kryesor. Për ta bërë këtë ju duhet të shtoni në skedar CSS veti shtesë për Footer-in, duke ju lejuar të vendosni gjerësinë e tij dhe ta rreshtoni atë horizontalisht në mes të ekranit.

Ka kuptim të vendosni gjerësinë e barabartë me gjerësinë e të gjithë paraqitjes duke përdorur Vetitë e gjerësisë, dhe shtrirja horizontale mund të bëhet në të njëjtën mënyrë si ne për të gjithë paraqitjen faqosja e bllokut.

Kështu, do të na duhet të shtojmë veti shtesë për Footerin ID:

#footer(ngjyra e sfondit:#FFC0FF; e qartë: të dyja; lartësia: 20 px; margjina-lart: -20 px; gjerësia: 800 px; margjina-majtas: automatik; margjina-djathtas: automatik; )

Duke përdorur veçorinë width:800px, gjerësia vendoset në 800 piksel, dhe duke përdorur dy vetitë margin-majtë: auto dhe margin-djathtas: auto, dhëmbëzimi në të majtë dhe në të djathtë të fundit vendoset automatikisht, si rezultat i të cilat këto pika do të jenë të barabarta dhe heroi ynë do të rreshtohet në mes:

Epo, duket se nuk ka mbetur asgjë për të përmirësuar, por nuk ishte kështu. Si gjithmonë, shfletuesi ynë i preferuar Internet Explorer 6 nuk kupton diçka nga vetitë CSS që përdorim. Në këtë shfletues (dhe, ndoshta, edhe në disa të tjerë të vjetër), pavarësisht nga të gjitha përpjekjet tona, fundi i faqes nuk do të shtypet në fund, por do të mbetet ende në kolonën më të lartë të paraqitjes së faqes.

E gjithë kjo ndodh sepse ( nuk e kupton veçorinë min-lartësi: 100%, të cilën e përdorëm për të vendosur lartësinë minimale të bllokut kryesor të barabartë me lartësinë e ekranit.

Prandaj, për të zgjidhur këtë problem do të duhet të përdorim një të ashtuquajtur hak që na lejon t'u shpjegojmë (në gishta) shfletuesve të vjetër se çfarë të bëjmë. Përpara lista CSS vetitë për maket do t'ju duhet të futni kombinimin e mëposhtëm:

* html #maket (lartësia: 100%; )

Ky rregull do të zbatohet vetëm për Shfletuesi i internetit Explorer 6, pjesa tjetër nuk do ta marrë parasysh dhe do ta zbatojë atë.

Pra, pamja përfundimtare e Style.css me fundin e shtypur në fund të ekranit do të jetë si më poshtë:

Trupi, html ( margjina: 0 px; mbushja: 0 px; lartësia: 100%; ) * html #maket ( lartësia: 100%; ) #maket ( gjerësia: 800 px; marzhi: 0 automatik; min-lartësia: 100%; ) # header( background-color:#C0C000; ) #left( background-color:#00C0C0; width:200px; float:left; ) #right(gjerësia:200px; background-color:#FFFF00; float:djathtas; ) #content (ngjyra e sfondit:#8080FF; margjina-majtas:202px; margjina-djathtas:202px; ) #footer(ngjyra e sfondit:#FFC0FF; qartë:të dyja; lartësia: 50px; margjina-lart: -50px; gjerësia:800px; margin-left: auto diferencë-djathtas: auto-rasporka (lartësia: 50px;)

Epo, forma përfundimtare e Index.html u dha pak më lart. Kjo është e gjitha, kjo seri artikujsh kushtuar bllokimit të paraqitjes së 2 dhe 3 kolonave të fiksuara dhe të rrjedhshme të faqeve të internetit mund të konsiderohet e plotë.

Ju gjithashtu mund të shikoni videon "Puna me Etiketa HTML div":

Paç fat! Shihemi së shpejti në faqet e faqes së blogut

Mund të shikoni më shumë video duke shkuar te

Ju mund të jeni të interesuar

Paraqitja e bllokut - Krijoni dy kolona, ​​tre kolona dhe paraqitjet e gomës për sitin
Paraqitja e DiV- Ne krijojmë blloqe për plan urbanistik me dy kolona në HTML, përcaktoni madhësitë e tyre dhe vendosni pozicionimin në CSS

Mbaj mend që në momentin kur fillova të kaloja nga tabelat në paraqitjen e div, një nga vështirësitë që hasa ishte e mëposhtme - si ta shtyni fundin e faqes në fund të dritares së shfletuesit, në mënyrë që faqja të shfaqet e zgjatur deri në lartësinë e saj të plotë, pavarësisht nga vëllimi i tekstit, dhe nëse lartësia e faqes është më e madhe se lartësia e dritares së shfletuesit (kur shfaqet një rrotull), futeri do të mbetet në vendin e duhur.

Nëse me ndihmën e tabelave ky problem zgjidhet vetëm duke specifikuar lartësinë për tabelën dhe/ose qelizën e vendosur në të, atëherë kur duke përdorur CSS faqosja e bllokut përdor një qasje krejtësisht të ndryshme.

Në procesin e praktikës, u identifikova për veten time 5 mënyra për të shtyrë fundin në fund të dritares së shfletuesit me duke përdorur CSS .

Kodi HTML i të gjitha metodave të paraqitura ka strukturën e mëposhtme (i vetmi ndryshim është kodi CSS):

Kodi CSS më poshtë përfshin vetëm ato veti që janë minimalisht të nevojshme për të zbatuar metodën përkatëse. Për secilën prej tyre mund të shihni një shembull të drejtpërdrejtë.

Mënyra e parë

Footer është shtypur poshtë nga e tij pozicionim absolut dhe shtrirja e lartësisë së blloqeve mëmë (html, trupi dhe .mbështjellësi) në 100%. Në këtë rast, blloku i përmbajtjes.përmbajtja duhet të specifikojë një diferencë të poshtme që është e barabartë ose më e madhe se lartësia e fundores, përndryshe futeri do të mbulojë një pjesë të përmbajtjes.

* ( margjina: 0; mbushja: 0; ) html, trupi ( lartësia: 100%; ) .mbështjellësi ( pozicioni: relative; min-lartësia: 100%; ) .përmbajtja ( mbushja-fund: 90 px; ) .footer ( pozicioni : absolute: 0 gjeresi: 100%;

Mënyra e dytë

Footer shtypet poshtë duke tërhequr bllokun e përmbajtjes dhe "prindërit" e tij në lartësinë e plotë të dritares së shfletuesit dhe duke e ngritur fundin lart përmes një margjine negative (margin-lart) për të hequr qafe atë që rezulton rrotull vertikale. NË në këtë rastËshtë e nevojshme të tregohet lartësia e bodrumit, dhe duhet të jetë e barabartë me sasinë e dhëmbëzimit.

* ( margjina: 0; mbushja: 0; ) html, trupi, .mbështjellësi (lartësia: 100%; ) .përmbajtja (madhësia e kutisë: kutia kufitare; lartësia min: 100%; mbushja-fund: 90 px; ) . fundi i faqes (lartësia: 80 px; margjina e sipërme: -80 px; )

Falë veçorisë së madhësisë së kutisë: border-box, ne parandalojmë që kutia me klasën .content të tejkalojë lartësinë 100%. Kjo do të thotë, në këtë rast min-lartësia: 100% + padding-bottom: 90px është e barabartë me 100% të lartësisë së dritares së shfletuesit.

Mënyra e tretë

Është mirë sepse, ndryshe nga metodat e tjera (përveç të 5-tës), lartësia e këmbës nuk ka rëndësi.

* ( margjina: 0; mbushja: 0; ) html, trupi (lartësia: 100%; ) .mbështjellësi ( shfaqja: tabela; lartësia: 100%; ) .përmbajtja ( shfaqja: rreshti i tabelës; lartësia: 100%; )

Këtu ne emulojmë sjelljen e një tabele duke e kthyer bllokun .wrapper në një tabelë dhe bllokun .content në një rresht tabele (afishimi: tabela dhe shfaqja: veçoritë e rreshtit të tabelës përkatësisht). Falë kësaj, dhe faktit që blloku .content dhe të gjithë kontejnerët e tij prindër janë caktuar në lartësinë 100%, përmbajtja shtrihet në lartësinë e saj të plotë, minus lartësinë e futbollit, e cila përcaktohet automatikisht - emulimi i tabelës parandalon zgjerimin e futbollit përtej lartësisë së dritares së shfletuesit.

Si rezultat, fundi shtypet në fund.

Metoda e katërt

Kjo metodë nuk është e ngjashme me asnjë nga ato të mëparshmet, dhe veçantia e saj qëndron në përdorimin e CSS funksionet e kalc() dhe njësitë vh, të cilat mbështeten vetëm shfletues modern. Këtu ju duhet të dini lartësinë e saktë të bodrumit.

* ( margjina: 0; mbushje: 0; ) .përmbajtja (min-lartësia: llogaritur (100vh - 80px); )

100vh është lartësia e dritares së shfletuesit dhe 80px është lartësia e fundores. Dhe duke përdorur funksionin calc() ne zbresim vlerën e dytë nga e para, duke shtypur kështu fundin deri në fund.