Cum să împingeți subsolul în partea de jos a ferestrei browserului utilizând CSS. Cum să cuibărești corect un subsol flotant în partea de jos a paginii Ce înseamnă această etichetă subsol

Să trecem la un exemplu de lucru

Ce vedem defecte de aspect în ceea ce privește implementarea efectului unui subsol cuie? Vedem asta
1) subsolul de pe site se află într-un bloc cu id \u003d layout, care nu are înălțime procentuală. În teorie, el, părinții și blocul conținut stâng trebuie setate la 100% înălțime. Există probleme cu acesta din urmă - nu este potrivit pentru acest lucru. În consecință, lipsește un bloc interstrat sau subsolul este la un nivel greșit. În afară de,
2) înălțimea subsolului este variabilă (depinde de numărul de elemente din listă și de dimensiunea fontului, acest lucru poate fi văzut nu din HTML, ci din CSS). ȘI
3) peste #layout există o unitate de anunțuri cu o înălțime fixă \u200b\u200bde 90 px;
4) nu există casete de aliniere în subsol sau (în general vorbind) în casetă #layout (da, dar deasupra blocului .posturi_rotate; cu toate acestea, poate ar trebui atribuit subsolului).

Punctul 4 - va trebui să desenați cu un script.
S-ar părea simplu să-ți dai seama de al treilea punct adăugând #layout (margin-top: -90px;) Dar amintește-ți că acest bloc poate să nu existe - este suprimat de un dispozitiv de tăiere a bannerelor, sau agenții de publicitate vor decide brusc să nu-l afișeze. Există o serie de pagini ale site-ului în care nu este. Prin urmare dependența marginea-sus dintr-o unitate de anunțuri este o idee proastă. Mult mai bine este să-l așezi înăuntru #layout - atunci nu va interfera cu nimic.

Primul punct este că, pentru ca subsolul cuie să funcționeze, trebuie să plasați blocul de subsol #layout... Cu toate acestea, cu ajutorul javascriptului, puteți implementa alte scheme ale subsolului cuie, dar în orice caz, aveți nevoie de JS sau de aspectul corect inițial pentru a vă lipsi de acesta.

Deoarece nu putem fi mai puternici decât ultimul designer de site-uri, care a „blocat” subsolul în conținut, vom amâna ideea plasării corecte a subsolului pe viitorul nostru site (care, prin urmare, va fi „mai cool” Habr!) stări. (Să spunem imediat că nu vinovatul este proiectantul de machetare sau comutatorul, ci tipul site-ului, desigur, determină decizia strategică a managementului proiectului.) Astfel nu vom ajunge la ideal, deoarece în prima sau două secunde în timpul procesului de încărcare, pagina va avea un aspect greșit. Dar conceptul și capacitatea de a depăși cel mai popular site din lumea IT sunt importante pentru noi.

Prin urmare, în locul potrivit din script (devreme, la sfârșitul încărcării paginii), vom scrie transferurile blocurilor de anunțuri și subsol DOM în locurile necesare. (Să ne pregătim pentru faptul că, datorită scripturilor de utilizator, soluția va fi mai complicată decât una curată.)
var dQ \u003d funcție (q) (return document.querySelector (q);) // pentru prescurtare var topL \u003d dQ ("# topline"), lay \u003d dQ ("# layout"), foot \u003d dQ ("# footer" ); if (topL && lay) // banner - în interiorul blocului de conținut lay.insertBefore (topL, lay.firstChild); if (lay && foot && lay.nextSibling) // împachetarea subsolului lay.parentNode.insertBefore (subsol, lay.nextSibling);
Am pus blocurile în locurile lor - acum rămâne să atribuim proprietățile necesare elementelor. Înălțimea subsolului va trebui setată exact, pur și simplu pentru că o știm deja până când acționează scriptul utilizatorului (sfârșitul încărcării paginii). Datorită punctului de declanșare al scriptului de utilizator, așa cum s-a menționat mai sus, un salt în afișarea subsolului pe pagină este inevitabil. Poți încerca să faci o „față bună”, dar cu un „joc rău”? Pentru ce? „Jocul rău” al site-ului vă permite să creați un concept fără super-eforturi, care va fi suficient pentru a evalua calitatea și nu va fi necesar dacă „jucați corect” în proiectul dvs.
if (picior) (// bloc aliniator

în subsolul h.apnd_el ((clss: "clear", appendTo: subsol)); var footH \u003d foot.offsetHeight; // ... și măsurați înălțimea subsolului) if (topL && lay && footer && lay.nextSibling) (// alinierea blocului înălțimii dorite în conținut ("aspect") h.apnd_el ((clss: "clear", css :( înălțime: (footH || 0) + "px"), appendTo: lay)); lay.style.minHeight \u003d "100%"; h.addRules ("# layout (margin-bottom: -" + footH + "px ! important) html, corp (înălțime: 100%) ");)
Aici ne-am permis să folosim o funcție auto-scrisă h.apnd_elcare face cam același lucru ca în jQuery -
$("") .css ((înălțime: footH || 0)). appendTo ($ (footer))
Și apoi există o altă funcție tipică de injecție a regulilor CSS - h.addRules... Aici nu puteți face fără ea, pentru că trebuie să declarați o regulă cu „ ! important"- doar datorită particularităților priorităților de stil din scriptul utilizatorului.

Cu aceste bucăți de cod, vom putea vedea subsolul cuie în scriptul utilizatorului (după ce l-am sărit în jos) și vom înțelege pe deplin cum să construim aspectul paginii. Este frustrant să folosești zilnic designul săritor, așa că este recomandat să îl faci exclusiv pentru demonstrare și testare. În scriptul de utilizator HabrAjax, am instalat un script similar, închizându-l cu setarea „underFooter” (bifați caseta din lista de setări înainte de „cuie în subsolul inferior”), începând de la versiunea 0.883_2012-09-12.

Footerul cu cui afectează necesitatea actualizării stilurilor ZenComment dacă este instalat? Da, da. Datorită lanțului complex de priorități de stil, în care stilurile inserate de scriptul de utilizator au cea mai mică prioritate, a trebuit să ajustez ușor stilurile de utilizator pentru capacități lucrați cu un subsol cu \u200b\u200bcui. Dacă nu actualizați stilurile de utilizare (până la 2.66_2012-09-12 +), subsolul nu va funcționa corect.

bloc rotated_post (trei postări populare din trecut) arată mai logic în subsol, deci într-un script real este mutat și în subsol.

Al doilea punct (din lista imperfecțiunilor din aspect) este raționamentul pur pentru Habr (acestea nu se aplică scriptului utilizatorului și se repetă parțial pe cele anterioare).

Paginile au o problemă care le împiedică să redea un subsol cu \u200b\u200bcui în CSS pur - o înălțime de subsol nedefinită, în funcție de dimensiunile de font implicite ale browserului. Pentru a implementa un subsol în CSS, trebuie să alegeți înălțimile relative ale fonturilor, dar este posibil să nu funcționeze dacă fonturile furnizate nu sunt disponibile pe computerul utilizatorului. Prin urmare, soluția ar trebui să includă un javascript care să se potrivească poziției aproximative a subsolului cu tranziții la cea exactă. Sau, după ce ați analizat acceptabilitatea soluției făcute în scriptul utilizatorului pe diferite platforme, faceți o instalare calculată a subsolului cuie - primele observații arată că soluția este practică.

Concluzie: este posibil să aranjați complet aspectul pe Habré, dar pentru aceasta aveți nevoie de un proiectant care să înțeleagă în mod clar comportamentul aspectului și să plaseze blocurile în ordinea corectă. (Acum, subsolul și bannerul de sus sunt „în locul greșit” și nu astfel încât să se poată stiliza doar pentru a obține un subsol cuie.) Puteți face fără JS dacă setați înălțimea subsolului în unități relative, luând o anumită marjă pentru incertitudinea fontului.

Implementare

Dacă activați HabrAjax 0.883+, vom vedea lucrarea „subsolului cu cui”. Se adaptează în înălțime folosind scripturi. Vă permite să evaluați cât de bine arată paginile cu subsolul cuie în comparație cu cele obișnuite. Stilurile de utilizare ZenComment sunt compatibile cu scripturile, dar pentru ca subsolul cu cui să funcționeze corect, trebuie să instalați versiunea ZenComment 2.66_2012-09-12 + cu acestea.

Fapte de comportament de implementare

Șamanismul cu subsol, stiluri și scripturi este șamanism (numai pentru a fi susținut de teorie). Comportamentul este ușor diferit în diferite browsere, dar în unele locuri este neașteptat. Fără scripturi de utilizator și rearanjări bloc, rezultatele vor fi diferite. Aceasta este ceea ce au dat experimentele cu implementarea în scriptul utilizatorului.

1) Firefox - lipsa neașteptată de salt de subsol. Este ciudat că nu sunt acolo - redarea are loc după plasarea subsolului în partea de jos.

2) Chrome - a surprins cu un „scroll errant” - spațiile goale din partea de jos sunt adăugate pe pagină cu o perioadă de o dată pe secundă - se întâmplă ceva greșit la calcularea înălțimilor. Se tratează scriind html, body (înălțime: 100%) în stilul de utilizare, dar fără garanții că va funcționa întotdeauna. Este mai sigur să verificați dacă documentul nu depășește fereastra în înălțime și, dacă nu, mutați subsolul, altfel nimic. Cu săriturile - totul este în ordine, așa este.

3) Opera - fără sărituri (v. 12.02) la încărcarea primei pagini, dar o reîncărcare pripită poate arăta un salt de subsol. În caz contrar, nu conduce mai puțin corect decât Fx.

Ei bine, va trebui să-l învățați special pe Chrome să se comporte corect (cu un script) și, în această formă, lansați versiunea pentru revizuire. Prin urmare, site-ul din scriptul utilizatorului este puțin mai complicat decât cel dat în articol.

Trebuie reamintit faptul că aceasta nu este o implementare completă - nu ia în considerare, de exemplu, cazurile de redimensionare a ferestrelor de către utilizator. Puteți găsi, de asemenea, combinații rare (în practică) de schimbare a înălțimii subsolului înainte și după mutare, unde logica va începe să funcționeze defectuos fără a duce la neplăceri. Dezavantajele au fost lăsate în mod deliberat, deoarece se observă echilibrul complexității revizuirii și actualitatea soluției.

Ca rezultat, sa dovedit a fi o schemă de lucru destul de viabilă, cel puțin pentru calculatoarele staționare rapide. Dacă se găsește un comportament incorect al subsolului, setarea „underFooter” ar trebui să fie dezactivată.

Pentru ce pagini este util acest lucru?

Pe un site standard, fără stiluri de utilizator, chiar și paginile scurte de întrebări și răspunsuri se dovedesc a fi mai lungi de 1500 px, ceea ce în majoritatea cazurilor este invizibil cu monitoarele orizontale. Dar chiar și cu monitoarele obișnuite, se întâlnesc deseori paginile personale ale utilizatorilor cu o înălțime de aproximativ 1300 pixeli, unde apare un subsol neîntrerupt în toată splendoarea sa. Nici un număr de pagini din setările utilizatorului nu sunt foarte lungi.

Dacă utilizați stiluri de utilizator ZenComment, acestea reduc foarte mult înălțimea de pagină necesară, iar scriptul de utilizator HabrAjax poate să nu afișeze unele sau toate barele laterale din bara laterală. Prin urmare, cu scripturi și stiluri, efectul unui subsol nesetat este observat mult mai des. Prin urmare, este logic ca o soluție de subsol să apară pentru prima dată în HabrAjax. Dar chiar și un site normal are un număr de pagini în care ar fi util un subsol cu \u200b\u200bcui.

Va exista sprijin?

Comportamentul site-ului în ultimul an arată că dezvoltatorii (și, prin urmare, conducerea) au început să implementeze caracteristici care existau anterior doar în scripturile și stilurile de utilizator. De exemplu, la începutul anului am scris unde am adunat multe mici urări. Șase luni mai târziu, m-am întors la el și am observat cu satisfacție (chiar în text; puteți vedea „UPD” și date) că o serie de caracteristici descrise ca dorințe au fost deja implementate pe site.

În continuare, să ne uităm la „săgețile” în loc de casetele pentru evaluarea comentariilor. Au apărut la utilizatorii almalexa („Prettifier”) acum aproximativ 3 ani și au fost adoptați în ZenComment acum 2 ani. Acum aproximativ 2-3 luni, au apărut pe site. Începe să creadă că după un timp săgețile se vor răspândi oarecare distanță, așa cum se face în ZenComment (o săgeată la stânga numărului, a doua la dreapta), pentru a pierde mai puțin.

Prin urmare, poate, „subsolul cuie” de pe Habré nu este o fantezie pe cât ar putea părea acum aproximativ 3 ani.

Au fost introduse și alte caracteristici din scriptul HabrAjaxpentru ultimele 3 luni (poate fi dezactivat în setări):
* Autorii câmpurilor de intrare (în Opera poate încetini textele mari);
* zile ale săptămânii pentru alte date decât „azi” și „ieri”;
* evenimente în flux, pliabil la 1 linie și 2 caractere;
* reducerea cuvintelor „habr *” la „χ ·” și „χα”;
* indicii de date în funcție de numerele articolelor - se raportează în ce lună și în ce an a fost articolul înainte de a fi încărcat, după numărul din adresa URL
* a restrâns „Postări conexe” la 2 cuvinte Captură de ecran a ferestrei pop-up „postări similare” (afișând 12 linkuri, nu 4).

Acesta este un fel de coșmar! De ce subsolul site-ului dvs. apare din nou și schimbă designul? Nu este posibil să apăsați corect subsolul paginii cu ceva? Cu toate acestea, conținut sau cărămizi! Se va potrivi o cărămidă în monitor?

Văd, apoi stai pe spate și nu face nimic până nu vei citi articolul nostru până la capăt.

Crearea subsolului potrivit pentru site-ul dvs.

Mulți proprietari de site-uri se confruntă cu această problemă atunci când subsolul paginii apare doar „sus”. Și atunci nu este clar ce să facem. Cel mai adesea, un astfel de neajuns este păcătuit de design-urile de site-uri web care au fost expuse rapid singure ( cerc "mâini nebune") sau webmasteri începători.

În același timp, la începutul vieții site-ului, nu se întâmplă nimic terifiant. Și această idilă continuă atât timp cât conținutul apasă „cu propria greutate” pe subsol, nepermițându-i să se ridice. Dar merită să plasați mai puțin material pe pagină, iar subsolul „calm” recent se ridică instantaneu, făcând ca întregul design al site-ului să pară inadecvat.

Pentru a elimina acest „defect” al șablonului de aspect, nu este necesar să cheltuiți bani pe servicii de webmaster. Cel mai adesea, subsolul site-ului poate fi înlocuit de dumneavoastră. Luați în considerare toate opțiunile posibile pentru eliminarea unei astfel de probleme:

Prima cale

Prima modalitate de „ancorare” a subsolului „în partea de jos” a paginii se bazează pe CSS. Să începem cu un exemplu de cod și apoi să analizăm mai atent implementarea acestuia:

html (înălțime: 100%;) antet, nav, secțiune, articol, deoparte, subsol (afișaj: bloc;) corp (înălțime: 100%;) # wrapper (lățime: 1000px; marjă: 0 auto; înălțime minimă: 100 %; înălțime: automată! important; înălțime: 100%;) # antet (înălțime: 150px; fundal-culoare: rgb (0,255,255);) #content (umplutură: 100px; înălțime: 400px; fundal-culoare: rgb (51,255,102) ;) #footer (lățime: 1000px; margine: -100px auto 0; înălțime: 100px; poziție: relativă; fundal-culoare: rgb (51,51,204);)

Pentru a lipi subsolul în partea de jos a etichetei de pagină