Podnožje na dnu css stranice. Uređen podrum

Pređimo na radni primjer

Šta vidimo nedostaci rasporeda u smislu implementacije efekta prikovanog podnožja? Vidimo to
1) Podnožje stranice je unutar bloka sa id=layout-om koji nema postotak visine. U teoriji, on, roditelji i .content-left blok sadržaja trebali bi biti postavljeni na 100% visine. Problemi nastaju s ovim posljednjim - nije prilagođen za to. Stoga nedostaje jedan međuslojni blok ili je podnožje na pogrešnom nivou. osim toga,
2) visina podnožja je promjenjiva (zavisi od broja elemenata na listi i veličine fonta, to nije vidljivo iz HTML-a, već iz CSS-a). I
3) iznad #layout postoji oglasni blok sa fiksnom visinom od 90px;
4) nema blokova za poravnanje ni u podnožju ni (općenito govoreći) u bloku #layout(Da, ali iznad bloka .rotated_posts; međutim, možda bi to trebalo pripisati podnožju).

Tačka 4 - morate crtati skriptom.
Čini se da je lako shvatiti treću tačku dodavanjem #layout(margin-top:-90px;) Ali zapamtite da ovaj blok možda ne postoji - potisnut je alatom za sečenje banera ili oglašivači iznenada odluče da ga ne prikažu. Postoji veliki broj stranica na sajtu na kojima to nije. Dakle, zavisnost margin-top iz bloka oglasa je loša ideja. Mnogo bolje - stavite ga unutra #layout Onda mu neće smetati.

Prva stvar je da da bi zakucano podnožje uopće funkcionisalo, morate postaviti blok podnožja ispod #layout. Međutim, uz pomoć javascripta možete implementirati i druge šeme zakovanog podnožja, ali u svakom slučaju vam je potreban JS ili inicijalno ispravan izgled da biste to učinili bez njega.

S obzirom da ne možemo biti jači od najnovijeg layout dizajnera sajta, koji je podnožje „ugurao“ u sadržaj, odgodićemo ideju o pravilnom postavljanju podnožja na našu buduću stranicu (koja će, dakle, biti „hladnija“ nego Habr!), a mi ćemo secirati Habr sa javascriptom (userscriptom) na ispravna stanja. (Recimo odmah, nije kriv planer, ne skretničar, već tip lokacije, naravno, određuje stratešku odluku menadžmenta projekta.) Na ovaj način nećemo postići ideal, jer jer u prve sekunde ili dvije tokom procesa učitavanja stranica će biti s pogrešnim izgledom. Ali za nas je važan koncept i sposobnost da nadmašimo najpopularnije stranice u svijetu IT ljudi.

Stoga ćemo na pravom mjestu u skripti (ranije, na kraju učitavanja stranice), ispisati prijenose DOM blokova reklama i podnožja na prava mjesta. (Pripremimo se na činjenicu da će zbog korisničkih skripti rješenje biti složenije od čistog.)
var dQ = function(q)(return document.querySelector(q);) //za skraćivanje var topL = dQ("#topline"), lay = dQ("#layout"), foot = dQ("#footer" ); if(topL && lay) //banner - unutar bloka sadržaja lay.insertBefore(topL, lay.firstChild); if(lay && foot && lay.nextSibling) //pomičemo podnožje lay.parentNode.insertBefore(footer, lay.nextSibling);
Stavljamo blokove na njihova mjesta - sada ostaje elementima dodijeliti potrebna svojstva. Visina podnožja će morati biti točno postavljena, jednostavno zato što je već znamo do trenutka kada korisnički skript stupi na snagu (kraj učitavanja stranice). Zbog tačke pokretanja korisničkog skripta, kao što je gore objašnjeno, skok u podnožje na stranici je neizbježan. Možete li pokušati da napravite „dobru facu“, ali „lošom igrom“? Zašto? "Loša igra" stranice vam omogućava da napravite koncept bez velikih napora, što će biti dovoljno za procjenu kvaliteta i neće vam biti potrebno ako "igrate ispravno" na svom projektu.
if(foot)( //block-aligner

u podnožju h.apnd_el((clss:"clear", appendTo: footer)); var footH = foot.offsetHeight; //...i izmjerimo visinu podnožja ) if(topL && lay && footer && lay.nextSibling)( //poravnaj blok željene visine u sadržaju ("layout") h.apnd_el((clss:" clear", css:( visina: (footH ||0) +"px"), appendTo: lay)); lay.style.minHeight ="100%"; h.addRules("#layout(margin-bottom:- "+ footH +"px !važno)html, tijelo (visina:100%)"); )
Ovdje smo sebi dozvolili da primijenimo funkciju koja je sama napisala h.apnd_el, koji radi otprilike isto kao u jQueryju -
$("").css((visina: footH ||0)).appendTo($(footer))
A onda - još jedna tipična funkcija ubrizgavanja CSS pravila - h.addRules. Ovdje ne možete bez toga, jer morate deklarirati pravilo sa " !bitan" - samo zbog posebnosti prioriteta stila iz korisničkog skripta.

Sa ovim dijelovima koda, možemo vidjeti zakucano podnožje u korisničkom skriptu (nakon što ga skočimo dolje) i u potpunosti razumjeti kako napraviti izgled stranice. Neugodno je koristiti dizajn za skakanje svaki dan, pa se preporučuje da se to radi isključivo u svrhu demonstracije i testiranja. U korisničkom skriptu HabrAjax instalirao sam sličnu skriptu, zatvorivši je postavkom “underFooter” (postavite “kvačicu” na listi postavki ispred “podnožja prikovanog za dno”), počevši od verzije 0.883_2012-09- 12.

Da li zakucano podnožje utiče na potrebu ažuriranja ZenComment stilova, ako su postavljeni? Da jeste. Zbog složenog lanca prioriteta stilova, u kojem stilovi umetnuti korisničkim skriptom imaju najmanji prioritet, morali smo malo prilagoditi korisničke stilove za mogućnosti rad sa zakucanim podnožjem. Ako ne ažurirate korisničke stilove (na 2.66_2012-09-12+) - podnožje će raditi neprecizno.

Blokiraj rotated_post (tri popularna posta iz prošlosti) izgleda logičnije sa podnožjem, pa se u stvarnom skriptu i pomera u podnožje.

Druga stavka (sa liste nedostataka izgleda) je obrazloženje isključivo za Habr (ne odnose se na korisničku skriptu i djelimično ponavljaju prethodne).

Stranice imaju problem koji ih sprečava da naprave zakucano podnožje u čistom CSS-u - nedefinisana visina podnožja u zavisnosti od podrazumevanih veličina fonta u pretraživaču. Da biste implementirali podnožje u CSS-u, morate odabrati relativne visine fontova, ali oni možda neće raditi ako računar korisnika nema predviđene fontove. Stoga rješenje mora uključivati ​​javascript koji može prilagoditi približnu poziciju podnožja na tačnu poziciju s prijelazima. Ili, nakon što pogledate prihvatljivost rješenja napravljenog na korisničkom skriptu na različitim platformama, napravite proračunsku instalaciju zakucanog podnožja - prva zapažanja pokazuju da je rješenje praktično.

Zaključak: možete u potpunosti urediti raspored na Habré-u, ali za to vam je potreban layout dizajner koji jasno razumije ponašanje izgleda, raspoređujući blokove u ispravnom redoslijedu. (Sada podnožje i gornji banner "nema" i to ne na način da jednostavno mogu dobiti zakucano podnožje sa stilovima.) Možete bez JS-a ako postavite visinu podnožja u relativnim jedinicama, uzimajući neke margina prostora za neograničenost fonta.

Implementacija

Ako omogućite HabrAjax 0.883+, vidjet ćemo kako funkcionira “prikovano podnožje”. Prilagođava se po visini uz pomoć skripti. Omogućava vam da procenite koliko bolje izgledaju stranice sa zakucanim podnožjem u odnosu na obične. ZenComment korisnički stilovi su kompatibilni sa skriptama, ali da bi zakucano podnožje ispravno radilo s njima, morate instalirati ZenComment verziju 2.66_2012-09-12 +.

Činjenice o ponašanju pri implementaciji

Šamanizam sa podnožjem, stilovima i skriptama je šamanizam (podržan samo teorijom). U različitim pretraživačima, malo drugačije ponašanje, ali na nekim mjestima - neočekivano. Bez korisničkih skripti i preuređivanja blokova, rezultati će biti drugačiji. To su dali eksperimenti sa implementacijom na korisničkom skriptu.

1) Firefox - neočekivani nedostatak skokova u podnožju. Čudno je da ih nema – renderovanje se dešava nakon postavljanja podnožja na dno.

2) Chrome - iznenadio je "lutajućim skrolom" - na stranicu se dodaju prazni prostori sa periodom od jednom u sekundi na dnu - nešto se ne dešava sa proračunom visina. Tretira se dodavanjem html,body(height:100%) korisničkom stilu, ali bez garancija da će uvijek raditi. Pouzdanije je provjeriti da li dokument ne prelazi prozor po visini, a ako ne, onda pomaknite podnožje, inače - ništa. Sa skakanjem - sve je u redu, tako je.

3) Opera - nema skokova (v. 12.02) pri učitavanju prve stranice, ali brzopleto ponovno učitavanje može pokazati skok u podnožje. Inače, vodi ništa manje ispravno od Fx.

Pa, morate posebno naučiti Chrome da se ponaša ispravno (sa skriptom) i izbaciti verziju na pregled u ovom obliku. Stoga je dio u korisničkom skriptu malo složeniji od onog koji je dat u članku.

Treba podsjetiti da ovo nije potpuna implementacija - ne uzima u obzir, na primjer, slučajeve promjene veličine prozora od strane korisnika. Također možete pronaći rijetke (u praksi) kombinacije mijenjanja visine podnožja prije i poslije pomjeranja, gdje će logika početi pokvariti bez izazivanja neugodnosti. Nedostaci su namjerno ostavljeni, jer se održava ravnoteža složenosti revizije i privremenog rješenja.

Kao rezultat toga, pokazalo se da je to potpuno izvodljiva shema rada, barem za brze desktop računare. Ako se otkrije pogrešno ponašanje podnožja, postavku "underFooter" treba onemogućiti.

Za koje stranice je koristan?

Na standardnom sajtu, bez korisničkih stilova, čak i kratke stranice pitanja i odgovora su duže od 1500px, što je u većini slučajeva neprimjetno kod horizontalnih monitora. Ali čak i kod običnih monitora često se nailaze lične stranice korisnika visine od oko 1300 piksela, na kojima se nepovezano podnožje pojavljuje u svom sjaju. Ne baš dugo i veliki broj stranica u korisničkim postavkama.

Kada se primjenjuju ZenComment korisnički stilovi, oni uvelike smanjuju potrebnu visinu stranice, a HabrAjax korisnički skript možda neće prikazati neke ili sve bočne trake na bočnoj traci. Zbog toga se kod skripti i stilova mnogo češće uočava efekat neobrađenog podnožja. Stoga je logično da se popravak podnožja prvi put pojavio u HabrAjaxu. Ali čak i obična stranica ima nekoliko stranica na kojima bi zakucano podnožje bilo korisno.

Hoće li biti podrške?

Ponašanje stranice u protekloj godini pokazuje da su programeri (a samim tim i menadžment) počeli implementirati funkcije koje su ranije postojale samo u korisničkim skriptama i korisničkim stilovima. Na primjer, početkom godine sam pisao, gdje sam skupio mnogo malih želja. Šest mjeseci kasnije, vratio sam se na njega i sa zadovoljstvom konstatirao (odmah u tekstu; možete pročitati "UPD" i datume) da su brojne mogućnosti opisane kao želje već implementirane na stranici.

Zatim, pogledajmo "strelice" umjesto kvadrata za procjenu komentara. Pojavili su se u korisničkim ovlastima ("Prettifier") prije otprilike 3 godine, a usvojeni u ZenCommentu prije otprilike 2 godine. Prije otprilike 2-3 mjeseca pojavili su se na stranici. Počinje vjerovati da će se nakon nekog vremena strelice raširiti na određenu udaljenost, kao što se radi u ZenCommentu (jedna strelica lijevo od broja, druga desno), kako bi manje promašili.

korisnički stilovi

HabrAjax

Dodaj oznake

• tutorial

Svi koji su navikli na potpune web stranice preferiraju izgled “zakovanog” (ljepljivog, ljepljivog) na dnu podnožja stranice. Ali postoje dvije nevolje na Internetu: polja za unos koja ne rastu prema dolje i podnožja koja nisu prikovana (na dno prozora). Na primjer, kada otvorimo kratke stranice kao što je habrahabr.ru/settings/social, odmah upada u oči da se informacije koje treba da budu na dnu okvira za prikaz drže sadržaja i da su negdje u sredini, ili čak na vrhu prozora kada je dno prazno.

Dakle, umjesto .
Ovaj priručnik za početnike će pokazati kako napraviti “zakovano” podnožje za 45 minuta, ispravljajući nedostatke čak i tako cijenjene publikacije kao što je Habr, i takmičiti se s njim kao izvođenje vašeg obećavajućeg projekta.

Pogledajmo implementaciju jednog tipa zakucanog podnožja, preuzetog sa mreže, i pokušajmo da shvatimo šta se dešava. css-tricks.com/snippets/css/sticky-footer
CSS:
* ( margin:0; padding:0; ) html, tijelo, #wrap (visina: 100%; ) body > #wrap (visina: auto; min-height: 100%;) #main ( padding-bottom: 150px; ) /* mora biti iste visine kao podnožje */ #footer (pozicija: relativna; margin-top: -150px; /* negativna vrijednost visine podnožja */ visina: 150px; clear:oth;) /* CLEAR FIX*/ .clearfix:after (sadržaj: "."; prikaz: blok; visina: 0; jasno: oba; vidljivost: skriveno;) .clearfix (prikaz: inline-block;) /* Sakriva se od IE-mac \*/ * html .clearfix(visina: 1%;) .clearfix(display: block;) /* Završi sakrivanje od IE-mac */
HTML:

Malo je vjerovatno da će svi, čak i oni koji poznaju CSS, gledajući ovaj kod, razumjeti principe i samouvjereno uređivati ​​složen projekat. Svaki korak u stranu dovest će do nuspojava. Obrazloženje i produkcija podnožja ispod ima za cilj da vam pruži bolje razumijevanje CSS pravila.

Počnimo s teorijom

Uobičajena implementacija zakucanog podnožja oslanja se na jedinstveno svojstvo CSS2 da su elementi neposredna djeca. TIJELO- postotak visine potpore ( visina: 100% ili drugi) u odnosu na prozor, ako svi njihovi roditelji imaju isti procenat visine, počevši od oznake HTML. Ranije, bez tipova dokumenata, ali sada u Quirks modu, procentualne visine elemenata su podržane na bilo kom nivou, au modernim tipovima dokumenata - samo unutar elemenata postavljenih u procentima. Dakle, ako napravimo blok sadržaja (nazovimo ga #layout) sa 100% visine, pomerat će se kao da je prozor. Sav (streaming) sadržaj se stavlja u njega, osim podnožja i možda zaglavlja.

Podnožje se postavlja iza ovog bloka i daje mu visinu od 0px. Općenito, možete pratiti #layout stavite onoliko blokova koliko želite, ali svi moraju biti visoki ili 0 piksela ili izvan toka dokumenta (ne položaj: statičan). Postoji još jedan važan trik koji se obično koristi. Nije potrebno učiniti visinu jednakom 0. Visinu možete učiniti fiksnom, ali je oduzmite od glavnog bloka zbog svojstva margin-bottom: -(visina);.

Ljudski rečeno, stilovi prave prazan "džep" na dnu, u koji je ugrađeno podnožje, a ono se uvijek ispostavi ili zalijepljeno za donju ivicu prozora, ili za donju ivicu dokumenta ako je dokument je viši od visine prozora. Na internetu i na Habré-u postoji mnogo implementacija podnožja, s različitim uspjehom u svim pretraživačima. Nastavimo sami da ga gradimo, koristeći Habrov raspored kao "radnog konja".

Od dna bloka #layout- ovo je džep, mora biti prazan za podnožje, ne prikazuje objekte stranice. I tu se susrećemo sa još jednim ograničenjem – ne možemo napraviti prazan džep nauštrb padding in #layout, jer će tada biti više od 100%. neće spasiti margina- praznina se mora izvršiti zbog svojstava ugniježđenih elemenata. Osim toga, potrebno je osigurati da plutajući elementi ne puze ispod granice bloka, što se, na primjer, čini blokom

, gdje .clear(clear:oba). Važno je da ili ovo " visina" je fiksiran, ili u istim relativnim jedinicama, ili bismo ga izračunali tokom promjena stranica. Obično je zgodno poravnati ovaj okvir za poravnanje tako što ćete ga postaviti na potrebnu visinu.

Pogledajmo strukturu stranica našeg eksperimentalnog. Najlakši način da to učinite je da otvorite Firebug prozor ili sličan prozor ("Alati za programere" (Ctrl-F12)) u Chromeu.