Emri i shtresave është fundi i kokës. Fundi i faqes DIY i gozhduar në fund
Ky etiketë mund të përdoret, si etiketat e mëparshme, disa herë në një faqe. Me siguri tashmë e keni marrë me mend nga emri se është fundi i faqes. Mund të përmbajë numërues, tekst në lidhje me të drejtat e autorit në faqe, informacione kontakti, etj. Është gjithashtu e mundur të futni një shirit navigimi () në fundin e faqes. Askush nuk e ndalon futjen e elementeve të rinj si mënjanë dhe seksion, por gjithsesi nuk do ta bëja nëse do të isha në vendin tuaj.
Dhe
Kreu i faqes
Postimi numër 1
Këtu do të shkruajmë tekstin e postimit të parë.
Postimi numër 2
Këtu do të shkruajmë tekstin e postimit të dytë.
viti etj. Kopjimi është i ndaluar))
Rezultati duhet të jetë si më poshtë:
pavarësisht nga kreu dhe fundi i faqes së dokumentit. Është në raste të tilla që këta elementë mund të përdoren disa herë. Edhe pse jam i sigurt se mund të përdoren edhe në shiritin anësor.
Epo, tani jeni njohur me elementët bazë strukturorë të HTML5, dhe në mësimet e ardhshme do të shikojmë edhe më shumë elementë të rinj, forma të ndryshme që nuk ishin në specifikimet e tjera HTML!
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ë mbi paraqitjen e faqes në internet (), u diskutuan disa koncepte themelore të 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ë ndodh kur e shikoni atë në monitorë të mëdhenj (me rezolucion të lartë) dhe kur shfaqni një faqe me një sasi të vogël informacioni.
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. Sjellja e saktë e futbollit për rastin e një sasie të vogël informacioni në faqe dhe një ekrani të madh përdoruesi do të jetë si më poshtë:
Për ta zbatuar këtë, ne 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 CSS Style.css, por edhe në Index.html, i cili përmban kodin Html dhe formon blloqet 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 vetitë e mëposhtme CSS u shkruan në skedarin Style.css:
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ë një veçori tjetër CSS për etiketën Trupi në Style.css, duke vendosur lartësinë në 100%:
Trupi, html (diferencë: 0 px; mbushje: 0 px; lartësi: 100%; )
Kjo ende nuk do të ndikojë në pamjen, 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 pikselë ju lejon të vendosni një kufi të fortë (të ngurtë) 3 pikselë të trashë në të zezë për këtë kontejner. 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ë kjo? 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 në këtë mënyrë të përshtatet në ekranin e shfletuesit (tani mund të heqim kufirin e vetive CSS: 3 px të ngurta e zezë nga rregulli i maket, në mënyrë që trashësia e kufirit të mos e pengojë të gjithë faqosja, duke përfshirë fundin, nga përshtatja 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 hapësirën dhe luftojmë Internet Explorer
Por lind një problem, i cili do të shfaqet vetëm kur ka më shumë informacion në faqen e paraqitjes dhe mund të lindë situata e mëposhtme:
Rezulton se mund të lindë një situatë 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 e cila ndihmoi në ngritjen e bodrumit tonë kundër kontejnerit të paraqitjes kryesore.
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 ndodhej më parë blloku me footer-in.
Duke e vendosur këtë kontejner të ri në një lartësi të barabartë me lartësinë e fundores, ne mund të shmangim përplasjen e informacionit nga kontejneri kryesor me bllokun me fundin. Le të caktojmë një ID () në këtë kontejner 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ë, duhet të shtoni veti shtesë për Footer në skedarin CSS, duke ju lejuar të vendosni gjerësinë e tij dhe ta rreshtoni atë horizontalisht në mes të ekranit.
Ka kuptim të vendoset gjerësia e barabartë me gjerësinë e të gjithë paraqitjes duke përdorur veçorinë Width, dhe shtrirja horizontale mund të bëhet në të njëjtën mënyrë siç bëmë për të gjithë paraqitjen në një plan urbanistik.
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 veti margjina-majtas: auto dhe margin-djathtas: auto, cilësimi i dhëmbëzimit në të majtë dhe në të djathtë të footer-it 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ë vazhdojë të qëndrojë në kolonën më të lartë të paraqitjes së faqes.
E gjithë kjo ndodh sepse ( nuk e kupton veçorinë min-height: 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 listës së vetive CSS 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 shfletuesin Internet Explorer 6;
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 fikse dhe të lëngshme të faqeve të internetit mund të konsiderohet e plotë.
Ju gjithashtu mund të shikoni videon "Puna me etiketën div Html":
Ju uroj fat! Shihemi së shpejti në faqet e faqes së blogut
Ju mund të jeni të interesuar
Paraqitja e bllokut - Ne krijojmë paraqitje me dy kolona, tre kolona dhe me lëng për sitin 
Paraqitja DiV - Krijoni blloqe për një paraqitje me dy kolona në HTML, përcaktoni madhësitë e tyre dhe vendosni pozicionimin në CSS
Nëse këpucët janë komponenti i fundit i çdo veshjeje, atëherë fundi i faqes së një e-Commerce është elementi përfundimtar i dizajnit të tij të shitjes. Duke u fokusuar në elementin e poshtëm, në fund, faqet moderne të internetit janë gati të shfaqin personalitetin e tyre në çdo mënyrë të mundshme. Në një mjedis konkurrues të tregtisë elektronike, ka mjaft ide origjinale, kreativitet dhe tendenca të dizajnit. Para se të diversifikoni fundin e një siti të tregtisë elektronike, ia vlen të merren parasysh pika të rëndësishme. Çfarë të vendosni së pari dhe cila është mënyra më e mirë për ta bërë atë? Përmbledhja jonë e modeleve frymëzuese të fundeve ka disa opsione interesante.
Lexoni gjithashtu: 13 tendencat e marketingut në tregtinë elektronike për vitin 2019
Statistika interesante nga Chartbeat. Një studim i sjelljes së 25 milionë përdoruesve tregoi se sa thellë shfletojnë faqet. Rezulton se vëmendja e përdoruesit tërhiqet nga hapësira nën vijën e palosjes. Duke marrë më shumë informacion praktikisht të dobishëm, vizitorët qëndrojnë më gjatë në zonën 1200 pikselë nga pjesa e sipërme e faqes (me një ekran vertikal mesatar prej 700 px në shfletues) ose pas ekranit të dytë.
Koha e shikimit (sek.) / Largësia nga pjesa e sipërme e faqes (pikselë)
Ka një hendek të madh në kohëzgjatjen e shikimit të ekranit të parë dhe të dytë. TOP është 4 sekonda, kohëzgjatja arrin një maksimum (16 sekonda) në 1200 piksele nga lart dhe, me lëvizje të mëtejshme, zvogëlohet ngadalë.
Përqindja e vizitorëve (%) / Distanca nga pjesa e sipërme e faqes (pikselë)
Një pjesë e konsiderueshme e vizitorëve (më shumë se 25%) as nuk presin që përmbajtja të ngarkohet dhe të fillojë të lëvizë faqen. Kjo do të thotë se vetëm 75% do të shohin të parët në krye. Zona më e shikuar e faqes është 550 px (pak mbi vijën e palosjes).
Studimi hedh poshtë mitin se përdoruesit nuk lëvizin në fund të faqes dhe shikojnë të gjithë përmbajtjen. Fundi është gjithashtu i rëndësishëm për një faqe moderne të tregtisë elektronike, dhe madje ka avantazhet e veta.
Ide se si të dizajnoni një "bodrum" (footer), shembuj të shitjes së modeleve
Këto 10 këshilla do t'ju tregojnë se si të dizajnoni bukur footer-in për një faqe interneti - sipas rregullave të kompozimit në hartimin e uebit dhe zgjidhjen e detyrave prioritare. Aplikoni taktikat më të përshtatshme për të përmirësuar përdorshmërinë, UX (përvojën e përdoruesit) dhe madje për të rritur shitjet.
1. Informacioni i kërkuar
Tradicionalisht, çështjet e kërkuara organizative dhe ligjore mbulohen në fund të faqes. Njoftimet janë krijuar me tekst më pak të spikatur, gjë që çliron zona të tjera të faqeve për elementë më kuptimplotë. Këtu është një listë mostër për t'u marrë parasysh:
- Njoftimet për të drejtën e autorit
- Shfajësimet ligjore
- Informacioni i faturimit
- Njoftim për cookie
Faqja e internetit që shet produktin duhet të plotësojë kërkesat ligjore dhe të ofrojë informacion në lidhje me procedurën dhe periudhat e kthimit. Vendndodhja e tij në fund të faqes është e përshtatshme si për burimin e shitjes ashtu edhe për vizitorët.
Shembull fundor: Yves Rocher
Dyqani në internet i markës Yves Rocher: futboll në ekran të plotë me një dizajn të këndshëm të shtresave të alternuara. Informon për kompaninë, infrastrukturën e faqes së shitjes - nga ndjekja e porosive deri te politika e të dhënave personale. Ka edhe këshilla për përdorimin e produktit, bonuse, promovime
Shembull në fund të faqes: Lumity
Tregtarët e suplementeve ushqimore u nënshtrohen kërkesave ligjore në rritje. përgjegjësi. Ka mjaft gjëra që duhet/nuk duhet të thonë në faqen e tyre të shitjeve. Lidhjet me informacionin ligjor janë të theksuara me shkronja të zeza për shikueshmëri më të mirë.
Një footer me një imazh të bukur sfondi përshtatet në mënyrë shumë organike në dizajnin e përgjithshëm të faqes. Nuk ka asnjë kufi të qartë, përkundrazi, vetë përmbajtja shërben si ndarës
Shembull i fundit të faqes: Saddleback Leather Co
Një faqe interneti me shitje me një dizajn të bukur retro kokë dhe fund. Garanci 100-vjeçare kundër defekteve në material dhe përfundim. Kushtet e kthimit shoqërohen nga histori interesante... jo gjithçka është aq e trishtuar me informacionin e nevojshëm për e-Commerce, rezulton
2. Hapësirë negative – distancë e mjaftueshme vizuale
Kur kufizoni numrin e lidhjeve në fund të faqes, mos kurseni në hapësirën negative - kjo do të ketë një efekt mahnitës në perceptimin vizual dhe do të përmirësojë lexueshmërinë. Rregulli i përgjithshëm: Duke ruajtur hierarkinë vizuale, elementët qendrorë vërehen më shpejt (mund të përdoren në avantazhin tuaj!).
Shembull fundor: QUAY AUSTRALIA
Me një stil minimalist dhe një meny fikse rënëse, dyqani online mund të përballojë një fund të gjerë
Shembull fundor: Incase
RRETH sasi të mëdha hapësira mikro-negative (midis elementëve të vegjël) mund të thuhet në këtë mënyrë: përderisa të gjitha informacionet e nevojshme janë të pranishme, ai është i lexueshëm dhe perceptohet shpejt - gjithçka është në rregull
Shembull në fund të faqes: Stumptown Coffee Roasters
Fundi i gjerë i një vendi kafeje është një kompletim i shkëlqyer i një përbërjeje të pastër dizajni, në të cilën ka shumë hapësirë makro-negative ("ajër" midis seksioneve/seksioneve)
3. Thirrja përfundimtare për veprim
Lexoni gjithashtu: Mbi 30 shembuj dhe ide për dizajnimin e butonave të veprimit të synuar
Dizajni elegant i futbollit flet shumë për vetë burimin. Është e rëndësishme të theksohet: blerësi qëndron këtu pak më gjatë se në pjesët e tjera të faqes. Një mundësi e përshtatshme për një thirrje tjetër, përfundimtare për veprim. Shpesh ky është një abonim/buletin, por gjithashtu mund të lidhni një thirrje CTA me regjistrimin e llogarisë.
Shembull i fundit: Greetabl
Greetabl ka një fund të faqeve të saj të dizajnuara në mënyrë modeste që përfshin një thirrje për t'u abonuar. Me një minimum elementesh, thirrja bëhet e dukshme dhe në harmoni me sfondin bruz kthehet në një dekorim të sitit.
Shembull fundor: Ecwid
Dizajn i bukur me thirrje për veprim në fund të faqeve. Struktura e krijuesit të faqes së internetit të shitjes është universale. Është përkthyer në 35 gjuhë për miliona klientët e saj.
4. Karroca lundruese – rritja e disponueshmërisë së funksionalitetit të shitjes
Hyrja në karrocën e blerjeve nga fundi i faqes është një mënyrë e shkëlqyer për të përmirësuar përdorshmërinë dhe cilësitë e shitjes së sajtit.
Shembull fundor: Lemonadela
Faqja e shitjes së kompanisë së hotelierisë është e këndshme për t'u parë dhe e përshtatshme për blerësin
5. Navigimi në fund të faqes
Pjesa e poshtme e faqes është ideale për informacione që nuk shihen shpesh: në lidhje me kompaninë, kushtet e shërbimit dhe politikën e privatësisë. Në këtë rast, funksioni i footer-it është të ruajë të gjithë. Duke u ndjerë i humbur në mjedisin e tregtisë elektronike, dikush interesohet për infrastrukturën dyqan elektronik, duke lëvizur instinktivisht më tej...
Hapësira negative është thelbësore për lexueshmërinë e përmbajtjes. Në përgjithësi, "futeri" nuk është për qëllime navigimi, ndryshe nga një menu ose harta e faqes. Vetëm në raste të rralla, faqet e tregtisë elektronike vendosin kategori individuale produktesh në fund (
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ë shtrydhur fundin e faqes në fund të dritares së shfletuesit 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 shtypet poshtë duke e pozicionuar absolutisht dhe duke e shtrirë lartësinë e blloqeve mëmë (html , body dhe .wrapper) 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 futbollit, 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 rrotullimin vertikal që shfaqet. 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 në krye: -80 px; )
Falë veçorisë së madhësisë së kutisë: border-box, ne parandalojmë që kutia me klasën .përmbajtje 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ë është ndryshe nga asnjë nga të mëparshmet, dhe veçoria e saj është përdorimi i funksionit CSS calc() dhe njësisë matëse vh, të cilat mbështeten vetëm nga shfletuesit modernë. Këtu ju duhet të dini lartësinë e saktë të bodrumit.
* ( diferencë: 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 footer-it. Dhe duke përdorur funksionin calc() ne zbresim vlerën e dytë nga e para, duke shtypur kështu fundin deri në fund.
Mund të zbuloni se cilët shfletues mbështesin calc() dhe vh në caniuse.com duke përdorur lidhjet e mëposhtme: mbështetja e funksionit calc(), mbështetja e njësisë vh.
Metoda e pestë (më e përshtatshme)
Kjo mënyra më e mirë nga të gjitha ato të paraqitura, megjithatë funksionon vetëm në shfletues modern. Ashtu si në metodën e tretë, lartësia e këmbës nuk ka rëndësi.
* ( margjina: 0; mbushja: 0; ) html, trupi ( lartësia: 100%; ) .mbështjellësi ( shfaqja: përkul; drejtimi i përkuljes: kolona; lartësia min: 100%; ) .përmbajtja ( përkul: 1 0 automatike ;) .footer (përkul: 0 0 auto;)
Mund të mësoni rreth mbështetjes së shfletuesit për veçorinë flex.
