Subsol în partea de jos a paginii CSS. Subsol fix

Să trecem la un exemplu de lucru

Ceea ce vedem defecte de layoutîn ceea ce privește implementarea efectului unui subsol în cuie? Noi vedem asta
1) subsolul site-ului se află în interiorul unui bloc cu id = layout, care nu are înălțime procentuală. În teorie, el, părinții și blocul de conținut din stânga trebuie să fie setate la 100% înălțime. Cu acesta din urmă, apar probleme - nu este potrivit pentru asta. În consecință, un bloc interstrat lipsește sau subsolul este la un nivel greșit. In afara de asta,
2) înălțimea subsolului este variabilă (depinde de numărul de elemente din listă și de dimensiunea fontului, acest lucru se vede nu din HTML, ci din CSS). ȘI
3) de mai sus #aspect există o unitate de anunțuri cu o înălțime fixă ​​de 90px;
4) nu există casete de aliniere în subsol sau (în general vorbind) în casetă #aspect(da, dar deasupra blocului .postări_rotate; totuși, poate că ar trebui atribuit subsolului).

Punctul 4 - va trebui să desenați cu un scenariu.
Ar părea simplu să descifrați al treilea punct adăugând #layout (margin-top: -90px;) Dar amintiți-vă că acest bloc poate să nu existe - este suprimat de un cutter de banner sau agenții de publicitate vor decide brusc să nu îl arate. Există un număr de pagini pe site unde nu este. Prin urmare, dependența margine-top dintr-o unitate de anunțuri este o idee proastă. Mult mai bine este să-l așezi înăuntru #aspect- atunci nu se va amesteca cu nimic.

Primul punct este că, pentru ca subsolul cu cuie să funcționeze, trebuie să plasați blocul de subsol sub #aspect... Cu toate acestea, folosind javascript, puteți implementa alte scheme ale subsolului în cuie, dar, în orice caz, aveți nevoie de JS sau de aspectul inițial corect pentru a face fără el.

Deoarece nu putem fi mai puternici decât ultimul designer de site, care a „lipit” 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!), Și disecați Habr cu javascript (script utilizator) în stările corecte. (Să spunem imediat că nu layout-ul sau achitatorul este de vină, ci tipul site-ului, desigur, determină decizia strategică a managementului de proiect.) Astfel nu vom ajunge la ideal, pentru că în prima secundă sau două î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 în script (devreme, la sfârșitul încărcării paginii), vom scrie transferul blocurilor de anunțuri DOM și de subsol în locurile necesare. (Să ne pregătim pentru faptul că, datorită scripturilor utilizatorului, soluția va fi mai complicată decât una curată.)
var dQ = function (q) (return document.querySelector (q);) // pentru scurt var topL = dQ ("# topline"), lay = dQ ("# layout"), foot = dQ ("# footer" ); if (topL && lay) // banner - în interiorul blocului de conținut lay.insertBefore (topL, lay.firstChild); if (lay && foot && lay.nextSibling) // împachetează subsolul lay.parentNode.insertBefore (footer, lay.nextSibling);
Punem blocurile la 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 în momentul în care scriptul utilizatorului este în vigoare (sfârșitul încărcării paginii). Datorită punctului de declanșare al scriptului utilizatorului, așa cum sa menționat mai sus, un salt în afișarea subsolului de 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” pe proiectul dumneavoastră.
if (picior) (// block aligner

în subsolul h.apnd_el ((clss: „clear”, appendTo: footer)); var footH = foot.offsetHeight; //... și măsurați înălțimea subsolului) if (topL && lay && footer && lay.nextSibling) (// bloc de aliniere a înălțimii dorite în conținut („layout”) h.apnd_el ((clss: " clear", css :( înălțime: (footH || 0) + "px"), appendTo: lay)); lay.style.minHeight = "100%"; h.addRules ("# aspect (margin-bottom: - " + footH + "px ! important) html, body (înălțime: 100%) ");)
Aici ne-am permis să folosim o funcție auto-scrisă h.apnd_el care face aproximativ același lucru ca în jQuery -
$("") .css ((înălțime: footH || 0)). appendTo ($ (subsol))
Și apoi există o altă funcție tipică de injectare a regulilor CSS - h.addRules... Nu te poți lipsi aici, pentru că trebuie să declari o regulă cu „ ! important„- doar din cauza particularităților priorităților de stil din scriptul utilizatorului.

Cu aceste bucăți de cod, vom putea vedea subsolul în cuie în scriptul utilizatorului (după ce l-am sărit în jos) și vom putea înțelege pe deplin cum să construim aspectul paginii. Este neplăcut să folosiți zilnic designul care sări, așa că este recomandat să o faceți numai pentru demonstrație și testare. În scriptul utilizator HabrAjax am instalat un script asemănător, închizându-l cu setarea „underFooter” (bifați caseta din lista de setări înainte de „nailed to the bottom footer”), începând cu versiunea 0.883_2012-09-12.

Subsolul cu cuie afectează necesitatea de a actualiza stilurile ZenComment dacă sunt instalate? Da, da. Datorită lanțului complex de priorități de stil, în care stilurile inserate de scriptul utilizatorului au cea mai mică prioritate, a trebuit să ajustez ușor stilurile utilizatorului pentru posibilităților lucrați cu un subsol bătut în cuie. Dacă nu actualizați stilurile de utilizator (până la 2.66_2012-09-12 +), subsolul nu va funcționa corect.

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

Al doilea punct (din lista de imperfecțiuni în aspect) - raționamentul exclusiv pentru Habr (ele nu se aplică scriptului utilizatorului și le repetă parțial pe cele precedente).

Paginile au o problemă care le împiedică să creeze un subsol bine în CSS pur - o înălțime nedefinită a subsolului bazată pe dimensiunile implicite ale fonturilor ale browserului. Pentru a implementa un subsol în CSS, trebuie să alegeți înălțimile relative ale fonturilor, dar este posibil ca acestea să nu funcționeze dacă fonturile furnizate nu sunt disponibile pe computerul utilizatorului. Prin urmare, soluția ar trebui să includă un javascript care poate potrivi tranzițiile la poziția aproximativă a subsolului la cea exactă. Sau, după ce ați analizat acceptabilitatea soluției realizate în scriptul utilizatorului pe diferite platforme, faceți o instalare calculată a subsolului în cuie - primele observații arată că soluția este practică.

Concluzie: puteți aranja pe deplin layout-ul pe Habré, dar pentru aceasta aveți nevoie de un designer de layout care să înțeleagă clar comportamentul layout-ului și să plaseze blocurile în ordinea corectă. (Acum, subsolul și bannerul de sus sunt „în locul nepotrivit” și nu doar stiluri pentru a obține un subsol îndreptat.) Puteți face fără JS dacă setați înălțimea subsolului în unități relative, luând o anumită marjă pentru font incertitudine.

Implementarea

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

Fapte despre comportamentul implementării

Șamanismul cu subsol, stiluri și scenarii este șamanism (doar 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 rearanjamente de bloc, rezultatele vor fi diferite. Aceasta este ceea ce au dat experimentele cu implementarea în scriptul utilizatorului.

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

2) Chrome - a surprins cu un „scroll rătăcitor” - spații goale în partea de jos sunt adăugate paginii cu o perioadă de o dată pe secundă - ceva greșit se întâmplă cu calcularea înălțimilor. Se tratează prin scrierea html, body (înălțime: 100%) în userstyle, dar fără garanții că va funcționa întotdeauna. Este mai sigur să verificați dacă documentul nu depășește înălțimea ferestrei, iar dacă nu, atunci mutați subsolul, altfel nimic. Cu sărituri - totul este în ordine, este.

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

Ei bine, va trebui să înveți în mod special Chrome să se comporte corect (cu un script) și în acest formular să lansezi versiunea pentru revizuire. Prin urmare, site-ul din scriptul utilizatorului este puțin mai complicat decât cel prezentat în articol.

Trebuie reamintit că aceasta nu este o implementare cu drepturi depline - nu ia în considerare, de exemplu, cazurile de redimensionare a ferestrei de către utilizator. Puteți găsi, de asemenea, combinații rare (în practică) de modificare a înălțimii subsolului înainte și după mutare, în care logica va începe să funcționeze defectuos fără a duce la inconveniente. Dezavantajele au fost lăsate în mod deliberat, deoarece se respectă echilibrul dintre complexitatea revizuirii și actualitatea soluției.

Ca rezultat, sa dovedit a fi o schemă de lucru destul de funcțională, cel puțin pentru computerele rapide staționare. Dacă se găsește un comportament incorect al subsolului, setarea „sub subsol” 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, paginile personale ale utilizatorilor cu o înălțime de aproximativ 1300 de pixeli se întâlnesc adesea, unde un subsol neîntrerupt apare în toată gloria. Un număr de pagini din setările utilizatorului nu sunt, de asemenea, foarte lungi.

Dacă utilizați stiluri de utilizator ZenComment, acestea reduc foarte mult înălțimea necesară a paginii și este posibil ca scriptul de utilizator HabrAjax să nu arate unele sau toate barele laterale din bara laterală. Prin urmare, cu scripturi și stiluri, efectul unui subsol nesetat este observat mai des. Prin urmare, este logic ca remedierea subsolului 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 întins.

Va exista sprijin?

Comportamentul site-ului în ultimul an arată că dezvoltatorii (și, prin urmare, managementul) 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 urări mici. Șase luni mai târziu, am revenit la el și am remarcat cu satisfacție (chiar în text; puteți vedea „UPD” și datele) că o serie de caracteristici descrise ca dorințe au fost deja implementate pe site.

În continuare, să ne uităm la „săgeți” în loc de casetele pentru evaluarea comentariilor. Au apărut în utilizatori („Prettifier”) în urmă cu aproximativ 3 ani și au fost preluate în ZenComment în urmă cu aproximativ 2 ani. Acum vreo 2-3 luni au aparut pe site. Începe să creadă că după un timp săgețile se vor întinde pe o anumită distanță, așa cum se face în ZenComment (o săgeată la stânga numărului, a doua la dreapta), pentru a rata mai puțin.

stiluri de utilizator

HabrAjax

Adaugă etichete

• Tutorial

Oricine este obișnuit cu paginile de site cu drepturi depline preferă aspectul „cu cuie” (lipicios, lipicios) în partea de jos a subsolului paginii. Dar există două probleme pe Internet: câmpurile de introducere care nu cresc în jos și subsolurile care nu sunt întinse în cuie (în partea de jos a ferestrei). De exemplu, când deschidem pagini de înălțime scurtă, cum ar fi habrahabr.ru/settings/social, este imediat surprinzător că informațiile destinate să fie în partea de jos a ferestrei de vizualizare se lipesc de conținut și se află undeva la mijloc, sau chiar la partea de sus a ferestrei când dedesubt este goală.

Deci, în loc de.
Acest ghid pentru designeri de layout începători vă va arăta cum să realizați un subsol „cu cuie” în 45 de minute, corectând defectele chiar și ale unei publicații atât de respectate precum Habr și să concurezi cu ea ca o împlinire a proiectului tău promițător.

Să ne uităm la implementarea unui singur tip de subsol luat din rețea și să încercăm să ne dăm seama ce se întâmplă. css-tricks.com/snippets/css/sticky-footer
CSS:
* (marja: 0; padding: 0;) html, body, #wrap (înălțime: 100%;) body> #wrap (înălțime: auto; min-height: 100%;) #principal (padding-bottom: 150px; ) / * trebuie să aibă aceeași înălțime ca și subsolul * / #footer (poziție: relativ; margin-top: -150px; / * valoarea negativă a înălțimii subsolului * / înălțimea: 150px; clar: ambele;) / * CLEAR FIX * / .clearfix: după (conținut: "."; afișare: bloc; înălțime: 0; clar: ambele; vizibilitate: ascuns;) .clearfix (afișare: inline-block;) / * Se ascunde din IE-mac \ * / * html .clearfix (înălțime: 1%;) .clearfix (afișare: bloc;) / * Încheiați ascunderea din IE-mac * /
HTML:

Este puțin probabil ca toată lumea, chiar și cei care cunosc CSS, uitându-se la acest cod, să înțeleagă principiile și să editeze cu încredere un proiect complex. Orice pas în lateral va duce la efecte secundare. Raționamentul și construcția subsolului de mai jos au scopul de a vă oferi mai multe informații despre regulile CSS.

Să începem cu teorie

Implementarea obișnuită a unui subsol întins se bazează pe proprietatea unică CSS2 conform căreia elementele sunt descendenți imediati. CORP- mentine inaltimea procentuala ( inaltime: 100% sau alta) relativ la fereastra, daca toti parintii lor au aceeasi inaltime procentuala incepand de la eticheta HTML... Anterior, fără doctypes, dar acum în modul Quirks, înălțimile procentuale ale elementelor sunt acceptate la orice nivel, iar în doctypes moderne - doar în procentele specificate. Prin urmare, dacă facem un bloc de conținut (să-l numim #aspect) având 100% înălțime, se va derula ca și cum ar fi o fereastră. Tot conținutul (streaming) este plasat în el, cu excepția subsolului și poate a antetului.

Un subsol este plasat lângă acest bloc și i se acordă 0 pixeli de înălțime. În general, puteți urmări #aspect puneți câte blocuri doriți, dar toate trebuie să fie fie de la 0 pixeli înălțime, fie în afara fluxului documentului (nu poziție: static). Și există un alt truc important care este de obicei folosit. Nu este necesar să faceți înălțimea egală cu 0. Puteți face înălțimea fixă, dar scădeți-o din blocul principal folosind proprietatea margine-jos: - (înălțime);.

În termeni umani, stilurile fac un „buzunar” gol în partea de jos, în care este inserat subsolul și se dovedește întotdeauna fie lipicios de marginea de jos a ferestrei, fie de marginea de jos a documentului, dacă documentul este mai mare ca înălțime decât înălțimea ferestrei. Există multe implementări de subsol pe Internet și pe Habré, cu succes variabil în toate browserele. Să continuăm să-l construim singuri, folosind aspectul lui Habr ca „cal de bătaie”.

Din partea de jos a blocului #aspect- acesta este un buzunar, pentru subsol ar trebui să fie gol, neafișând obiectele paginii. Și aici întâlnim încă o limitare - nu putem face un buzunar gol în detrimentul căptușeală v #aspect, pentru că atunci va deveni mai mult de 100%. Nu va salva și marginea- golirea trebuie făcută în detrimentul proprietăților elementelor imbricate. Pe lângă toate, este necesar să se asigure că nu iese sub granița blocului de elemente plutitoare, ceea ce se face, de exemplu, printr-un bloc

, Unde .clear (clar: ambele)... Este important ca fie aceasta " înălţime„a fost fix, sau în aceleași unități relative, sau l-am fi calculat în procesul de schimbare a paginii. De obicei, este convenabil să combinați această casetă de aliniere cu setarea înălțimii necesare pentru ea.

Să ne uităm la structura paginilor experimentului nostru. Cel mai simplu mod de a face acest lucru este să deschideți fereastra Firebug sau o fereastră similară ("Instrumente pentru dezvoltatori" (Ctrl-F12)) în Chrome.