Podnožje na dnu css stranice. Popravljeni podrum

Prijeđimo na radni primjer

Ono što vidimo nedostatke rasporeda u smislu provedbe efekta pribijenog podnožja? Vidimo to
1) podnožje stranice je unutar bloka s id = izgledom, koji nema postotnu visinu. U teoriji, on, roditelji i blok lijevog sadržaja moraju biti postavljeni na 100% visine. S potonjim nastaju problemi - nije prikladno za to. Posljedično, jedan međuslojni blok nedostaje ili je podnožje na pogrešnoj razini. Štoviše,
2) visina podnožja je promjenjiva (ovisi o broju elemenata na popisu i veličini fonta, to se ne vidi iz HTML-a, već iz CSS-a). I
3) iznad #layout postoji oglasna jedinica fiksne visine 90px;
4) nema okvira za poravnanje u podnožju ili (općenito govoreći) u okviru #layout(da, ali iznad bloka .rotirani_postovi; međutim, možda bi to trebalo pripisati podnožju).

Točka 4 - morat ćete crtati skriptom.
Činilo bi se jednostavno shvatiti treću točku dodavanjem #layout (margin-top: -90px;) Ali zapamtite da ovaj blok možda ne postoji - potisnut je rezačem bannera ili će oglašivači iznenada odlučiti da ga ne prikazuju. Postoji niz stranica na stranici na kojima to nije. Stoga ovisnost margin-top iz oglasne jedinice je loša ideja. Mnogo je bolje staviti ga unutra #layout- onda se neće ni u što miješati.

Prva stvar je da kako bi zabijeno podnožje uopće funkcioniralo, morate postaviti blok podnožja ispod #layout... Međutim, koristeći javascript, možete implementirati i druge sheme zakucanog podnožja, ali u svakom slučaju vam je potreban JS ili inicijalno ispravan izgled da biste to učinili bez njega.

Budući da ne možemo biti jači od posljednjeg dizajnera stranice, koji je podnožje "zabio" unutar sadržaja, odgodit ćemo ideju ispravnog postavljanja podnožja na našu buduću stranicu (koja će, dakle, biti "hladnija" Habr!), I secirajte Habr pomoću javascripta (korisničke skripte) do ispravnih stanja. (Recimo odmah da nije kriv projektant ili skretničar, već tip mjesta, naravno, određuje stratešku odluku vodstva projekta.) Na taj način nećemo doći do ideala, jer jer u prvoj sekundi ili dvije tijekom procesa učitavanja, stranica će biti s pogrešnim izgledom. No, za nas je važan koncept i sposobnost da nadmašimo najpopularnije stranice u IT svijetu.

Stoga ćemo na pravom mjestu u skripti (rano, na kraju učitavanja stranice) napisati prijenos DOM oglasa i blokova podnožja na tražena mjesta. (Pripremimo se na činjenicu da će zbog korisničkih skripti rješenje biti kompliciranije od čistog.)
var dQ = funkcija (q) (povratak document.querySelector (q);) // za kratko var topL = dQ ("# gornja linija"), lay = dQ ("# raspored"), foot = dQ ("# podnožje" ); if (topL && lay) // banner - unutar bloka sadržaja lay.insertBefore (topL, lay.firstChild); if (lay && foot && lay.nextSibling) // omotavanje podnožja lay.parentNode.insertBefore (footer, lay.nextSibling);
Stavljamo blokove na njihova mjesta - sada ostaje dodijeliti potrebna svojstva elementima. Visina podnožja morat će biti točno postavljena, jednostavno zato što je već znamo do trenutka kada je korisnička skripta na snazi ​​(kraj učitavanja stranice). Zbog okidačke točke korisničke skripte, kao što je gore spomenuto, neizbježan je skok u prikazu podnožja na stranici. Možete li pokušati napraviti "dobru facu", ali "lošom igrom"? Za što? "Loša igra" stranice omogućuje stvaranje koncepta bez super-napora, što će biti dovoljno za procjenu kvalitete i neće biti potrebno ako "igrate ispravno" na svom projektu.
if (stopalo) (// blok za poravnavanje

u podnožju h.apnd_el ((clss: "clear", appendTo: podnožje)); var footH = stopa.offsetHeight; //... i izmjerite visinu podnožja) if (topL && lay && footer && lay.nextSibling) (// blok za poravnavanje željene visine u sadržaju ("layout") h.apnd_el ((clss: " clear", css :( visina: (footH || 0) + "px"), appendTo: lay)); lay.style.minHeight = "100%"; h.addRules ("# izgled (margin-bottom: - " + footH + "px ! važno) html, tijelo (visina: 100%) ";)
Ovdje smo si dopustili korištenje samonapisane funkcije h.apnd_el koji radi otprilike istu stvar kao u jQueryju -
$("") .css ((visina: footH || 0)). appendTo ($ (podnožje))
A onda postoji još jedna tipična funkcija ubacivanja CSS pravila - h.addRules... Ovdje ne možete bez toga, jer morate deklarirati pravilo sa " ! važno"- samo zbog posebnosti prioriteta stila iz korisničke skripte.

S ovim dijelovima koda moći ćemo vidjeti zakucano podnožje u korisničkoj skripti (nakon što ga preskočimo) i u potpunosti razumjeti kako izgraditi izgled stranice. Neugodno je svakodnevno koristiti dizajn odskakanja, pa se preporuča to raditi isključivo radi demonstracije i testiranja. U korisničku skriptu HabrAjax instalirao sam sličnu skriptu, zatvorivši je s postavkom "underFooter" (označite okvir u popisu postavki prije "pribijen na donje podnožje"), počevši od verzije 0.883_2012-09-12.

Utječe li zakucano podnožje na potrebu ažuriranja ZenComment stilova ako su instalirani? Da, ima. Zbog složenog lanca prioriteta stilova, u kojem stilovi koje je umetnula korisnička skripta imaju najmanji prioritet, morao sam malo prilagoditi korisničke stilove za prilike rad s pribijenim podnožjem. Ako ne ažurirate korisničke stilove (do 2.66_2012-09-12 +), podnožje neće raditi točno.

Blok rotirani_post (tri popularna posta iz prošlosti) izgleda logičnije u podnožju, pa se u pravoj skripti također premješta u podnožje.

Druga točka (s popisa nesavršenosti u izgledu) - obrazloženje isključivo za Habr (ne odnose se na korisničke skripte i djelomično ponavljaju prethodne).

Stranice imaju problem sprječavajući ih da naprave zakucano podnožje u čistom CSS-u - nedefiniranoj visini podnožja na temelju zadanih veličina fonta preglednika. Da biste implementirali podnožje u CSS-u, morate odabrati relativne visine fontova, ali oni možda neće raditi ako navedeni fontovi nisu dostupni na računalu korisnika. Stoga bi rješenje trebalo uključivati ​​javascript koji može uklopiti prijelaze na približni položaj podnožja na točan. Ili, nakon što pogledate prihvatljivost rješenja izrađenog u korisničkoj skripti 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 izgled na Habréu, ali za to vam je potreban dizajner izgleda koji jasno razumije ponašanje izgleda i postavlja blokove u ispravan redoslijed. (Sada su podnožje i gornji banner "na krivom mjestu", a ne tako da samo stiliziraju kako bi dobili zakucano podnožje.) Možete bez JS-a ako postavite visinu podnožja u relativne jedinice, uzimajući neku marginu za font nesigurnost.

Implementacija

Ako omogućite HabrAjax 0.883+, vidjet ćemo rad "zakucanog podnožja". Prilagođava se po visini pomoću skripti. Omogućuje vam da procijenite koliko bolje izgledaju stranice s zabijenim podnožjem u odnosu na obične. Korisnički stilovi ZenCommenta kompatibilni su sa skriptama, ali da bi zakucano podnožje radilo ispravno, morate s njima instalirati ZenComment 2.66_2012-09-12 + verziju.

Činjenice o ponašanju pri provedbi

Šamanizam s podnožjem, stilovima i skriptama je šamanizam (samo teorijski potkrijepljen). Ponašanje je malo drugačije u različitim preglednicima, ali je na nekim mjestima neočekivano. Bez korisničkih skripti i preuređivanja blokova, rezultati će biti drugačiji. To su dali eksperimenti s implementacijom u korisničkoj skripti.

1) Firefox - neočekivani nedostatak preskakanja podnožja. Čudno je da ih nema – renderiranje se događa nakon postavljanja podnožja na dno.

2) Chrome - iznenadio je "lutajućim svitkom" - prazna mjesta pri dnu dodaju se na stranicu s periodom od jednom u sekundi - nešto se krivo događa s izračunom visina. Tretira se pisanjem html-a, tijela (visina: 100%) u korisničkom stilu, ali bez garancija da će uvijek raditi. Sigurnije je provjeriti ne prelazi li dokument visinu prozora, a ako ne, onda pomaknuti 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, morat ćete posebno naučiti Chrome da se ponaša ispravno (sa skriptom) i u ovom obliku izbaciti verziju na pregled. Stoga je stranica u korisničkoj skripti malo kompliciranija od one koja je navedena u članku.

Treba podsjetiti da ovo nije punopravna 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 promjene visine podnožja prije i nakon pomicanja, gdje će logika početi neispravno funkcionirati bez neugodnosti. Nedostaci su namjerno ostavljeni, jer se promatra ravnoteža složenosti revizije i pravovremenosti rješenja.

Kao rezultat toga, pokazalo se da je shema rada prilično izvediva, barem za brza stacionarna računala. Ako se pronađe netočno ponašanje podnožja, postavku "underFooter" treba onemogućiti.

Za koje stranice je ovo korisno?

Na standardnoj stranici, bez korisničkih stilova, čak i kratke stranice pitanja i odgovora ispadaju dulje od 1500px, što je u većini slučajeva nevidljivo na horizontalnim monitorima. No i kod običnih monitora često se nailaze osobne stranice korisnika visine oko 1300 piksela na kojima se u svom sjaju pojavljuje neprekinuto podnožje. Niz stranica u korisničkim postavkama također nije jako dugačak.

Ako koristite ZenComment korisničke stilove, oni uvelike smanjuju potrebnu visinu stranice, a korisnička skripta HabrAjax možda neće prikazati neke ili sve bočne trake na bočnoj traci. Stoga se kod skripti i stilova primjetno češće opaža učinak nepodešenog podnožja. Stoga je logično da se popravak podnožja prvi put pojavio u HabrAjaxu. Ali čak i normalna stranica ima niz stranica na kojima bi zakucano podnožje bilo korisno.

Hoće li biti podrške?

Ponašanje stranice tijekom prošle godine pokazuje da su programeri (a samim tim i menadžment) počeli implementirati značajke koje su prije postojale samo u korisničkim skriptama i korisničkim stilovima. Na primjer, početkom godine sam pisala, gdje sam skupila mnogo malih želja. Šest mjeseci kasnije vratio sam se na njega i zadovoljno primijetio (odmah u tekstu; možete vidjeti "UPD" i datume) da su brojne mogućnosti opisane kao želje već implementirane na stranicu.

Zatim, pogledajmo "strelice" umjesto okvira za ocjenjivanje komentara. Pojavili su se u korisnicima ("Prettifier") prije otprilike 3 godine, a preuzete su 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 neku udaljenost, kao što se to radi u ZenCommentu (jedna strelica lijevo od broja, druga desno), kako bi manje promašili.

korisnički stilovi

HabrAjax

Dodaj oznake

• Vodič

Svatko tko je navikao na potpuno opremljene web stranice preferira 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 stranice kratke visine kao što je habrahabr.ru/settings/social, odmah je upečatljivo da se informacije dizajnirane tako da se nalaze na dnu okvira za prikaz drže sadržaja i negdje u sredini, ili čak na vrhu prozora kada je ispod njega prazno.

Dakle, umjesto.
Ovaj vodič za početnike layout dizajnere pokazat će vam kako napraviti "zabijeno" podnožje za 45 minuta, ispravljajući nedostatke čak i tako cijenjene publikacije kao što je Habr, i natjecati se s njim kao ispunjenjem vašeg obećavajućeg projekta.

Pogledajmo implementaciju jedne vrste zakucanog podnožja preuzetog s mreže i pokušajmo shvatiti što se događa. css-tricks.com/snippets/css/sticky-footer
CSS:
* (margina: 0; padding: 0;) html, body, #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; jasno: oboje;) / * CLEAR FIX * / .clearfix: nakon (sadržaj: "."; prikaz: blok; visina: 0; jasno: oboje; vidljivost: skriveno;) .clearfix (prikaz: inline-block;) / * Skriva se iz IE-mac \ * / * html .clearfix (visina: 1%;) .clearfix (display: block;) / * Kraj sakriti od IE-mac * /
HTML:

Malo je vjerojatno da će svi, čak i oni koji poznaju CSS, gledajući ovaj kod, razumjeti principe i pouzdano uređivati ​​složeni projekt. Svaki korak u stranu dovest će do nuspojava. Obrazloženje i konstrukcija podnožja u nastavku imaju za cilj dati vam bolji uvid u pravila CSS-a.

Počnimo s teorijom

Uobičajena implementacija zakucanog podnožja oslanja se na jedinstveno svojstvo CSS2 da su elementi neposredni potomci. TIJELO- održavati postotak visine ( visina: 100% ili drugi) u odnosu na prozor, ako svi njihovi roditelji imaju isti postotak visine počevši od oznake HTML... Prije, bez doctypes, ali sada u Quirks modu, postotne visine elemenata su podržane na bilo kojoj razini, au modernim tipovima dokumenata - samo unutar postotka specificiranih elemenata. Stoga, ako napravimo blok sadržaja (nazovimo ga #layout) sa 100% visine, pomicat će se kao da je prozor. U njega se stavlja sav (streaming) sadržaj, osim podnožja i možda zaglavlja.

Podnožje se postavlja pored ovog bloka i daje mu visinu od 0 piksela. Općenito, možete pratiti #layout stavite onoliko blokova koliko želite, ali svi moraju biti ili od 0 piksela u visinu ili izvan toka dokumenta (ne položaj: statičan). A 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 koristeći svojstvo margina-dno: - (visina);.

Ljudskim rječnikom rečeno, stilovi pri dnu čine prazan "džep" u koji je umetnuto podnožje, a ono se uvijek ispostavi ili ljepljivo za donji rub prozora, ili za donji rub dokumenta ako je dokument viši je od visine prozora. Postoje mnoge implementacije podnožja na Internetu i na Habréu, s različitim uspjehom u svim preglednicima. Nastavimo ga sami graditi, koristeći Habrov izgled kao „radnog konja“.

Od dna bloka #layout- ovo je džep, za podnožje bi trebao biti prazan, ne prikazujući objekte stranice. I tu nailazimo na još jedno ograničenje - ne možemo napraviti prazan džep nauštrb padding v #layout, jer će tada postati više od 100%. Neće spasiti i margina- prazninu je potrebno učiniti na račun svojstava ugniježđenih elemenata. Uz sve, potrebno je osigurati da ne izađe ispod granice bloka plutajućih elemenata, što se čini npr. blokom

, gdje .jasno (jasno: oboje)... Važno je da ili ovo " visina"bilo fiksno, ili u istim relativnim jedinicama, ili bismo ga izračunali u procesu promjene stranice. Obično je zgodno kombinirati ovaj okvir za poravnanje s postavljanjem potrebne visine za njega.

Pogledajmo strukturu stranica našeg eksperimentalnog. Najlakši način za to je otvaranje prozora Firebug ili sličnog prozora ("Alati za razvojne programere" (Ctrl-F12)) u Chromeu.