Ancorați subsolul în partea de jos a paginii css. Cum să împingeți subsolul în partea de jos a ferestrei browserului folosind CSS

Să trecem la un exemplu de lucru

Punctul 4 - trebuie să desenezi cu un scenariu.
Ar părea ușor să înțelegeț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 tăietorul de bannere sau agenții de publicitate decid brusc să nu îl arate. Există un număr de pagini pe site unde nu este. Prin urmare, dependență margine-top dintr-un bloc de anunțuri este o idee proastă. Mult mai bine - puneți-l înăuntru #aspect Atunci nu va sta în cale.

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

Întrucât nu putem fi mai puternici decât cel mai recent designer de aspect al site-ului web care a „plecat” subsolul în conținut, vom amâna ideea de a plasa corect subsolul pe viitorul nostru site (care, prin urmare, va fi „mai cool” decât Habr!), și vom diseca Habr cu javascript (userscript) la stările corecte. (Să spunem imediat, nu proiectantul, nici comutatorul este de vină, ci tipul site-ului, desigur, determină decizia strategică a managementului proiectului.) Astfel nu vom atinge idealul, deoarece î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-ului sunt importante pentru noi.

Prin urmare, în locul potrivit în script (mai devreme, la sfârșitul încărcării paginii), vom scrie transferurile blocurilor de publicitate DOM și subsolul în locurile potrivite. (Să ne pregătim pentru faptul că, din cauza userscript-urilor, soluția va fi mai complicată decât una curată.)
var dQ = function(q)(return document.querySelector(q);) //pentru scurtarea 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) //mută 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 să fie setată exact, pur și simplu pentru că o știm deja în momentul în care scriptul de utilizator intră în vigoare (încărcarea de la sfârșitul paginii). Datorită punctului de declanșare al scriptului de utilizator, așa cum sa discutat mai sus, saltul de afișare a 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ă realizaț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)( //bloc-aligner

Cu aceste bucăți de cod, putem vedea subsolul în cuie în scriptul de utilizator (după ce îl sărim în jos) și putem înțelege pe deplin cum să construim aspectul paginii. Utilizarea zilnică a unui design care sărită este neplăcută, așa că se recomandă să-l faceți exclusiv în scopuri demonstrative și de testare. În userscript-ul HabrAjax, am instalat un script asemănător, închizându-l cu setarea „subFooter” (setează un „bif” în lista de setări în fața „footer nailed to the bottom”), începând cu versiunea 0.883_2012-09- 12.

Subsolul cu cuie afectează necesitatea de a actualiza stilurile ZenComment, dacă sunt setate? Da, da. Datorită lanțului complex de priorități de stil, în care stilurile inserate de userscript au cea mai mică prioritate, a trebuit să ajustăm ușor stilurile de utilizator pentru oportunități lucrați cu subsol în cuie. Dacă nu actualizați stilurile de utilizator (la 2.66_2012-09-12+) - subsolul va funcționa incorect.

bloc postare_rotată (trei postări populare din trecut) arată mai logic cu subsolul, așa că în scriptul real este mutat și în subsol.

Al doilea element (din lista de defecte de aspect) este raționamentul exclusiv pentru Habr (nu se aplică scriptului utilizatorului și le repetă parțial pe cele anterioare).

Paginile au o problemă care le împiedică să creeze un subsol închis în CSS pur - o înălțime nedefinită a subsolului, în funcție de dimensiunile implicite ale fontului din browser. 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ă computerul utilizatorului nu are fonturile furnizate. Prin urmare, soluția trebuie să includă un javascript care poate ajusta poziția aproximativă a subsolului la poziția exactă cu tranziții. Sau, după ce se uită la acceptabilitatea soluției făcute pe userscript pe diferite platforme, faceți o instalare calculată a unui subsol î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, aranjand blocurile în ordinea corectă. (Acum, subsolul și bannerul de sus sunt „nu există” și nu în așa fel încât să poată obține pur și simplu un subsol cu ​​stiluri.) Puteți face fără JS dacă setați înălțimea subsolului în unități relative, luând câteva marjă de spațiu pentru caracterul nedefinit.

Implementarea

Fapte despre comportamentul implementării

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

2) Chrome - a surprins cu un „defilare rătăcitor” - se adaugă spații goale în pagină cu o perioadă de o dată pe secundă în partea de jos - se întâmplă ceva greșit cu calcularea înălțimii. Este tratată prin adăugarea html,body(height:100%) la stilul utilizatorului, dar fără garanții că va funcționa întotdeauna. Este mai fiabil să verificați dacă documentul nu depășește fereastra în înălțime și, dacă nu, atunci mutați subsolul, în caz contrar - nimic. Cu sărituri - totul este în ordine, este.

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

Ei bine, trebuie să înveți în mod specific Chrome să se comporte corect (cu un script) și să lansezi versiunea pentru revizuire în acest formular. Prin urmare, secțiunea din userscript este puțin mai complicată decât cea dată în articol.

Trebuie amintit că aceasta nu este o implementare completă - 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 schimbare a înălțimii subsolului înainte și după mutare, în care logica va începe să eșueze fără a crea inconveniente. Neajunsurile sunt lăsate în mod deliberat, deoarece se menține echilibrul dintre complexitatea revizuirii și soluția temporară.

Ca rezultat, s-a dovedit a fi o schemă de lucru complet viabilă, cel puțin pentru computerele desktop rapide. Dacă este detectat un comportament incorect al subsolului, setarea „sub subsol” ar trebui să fie dezactivată.

Pentru ce pagini este util?

Când sunt aplicate stiluri de utilizator ZenComment, acestea reduc foarte mult înălțimea necesară a paginii și este posibil ca userscript HabrAjax să nu arate unele sau toate barele laterale din bara laterală. Prin urmare, cu scripturi și stiluri, efectul unui subsol fără cuie este mult mai des observat. Prin urmare, este logic ca remedierea subsolului să apară în HabrAjax pentru prima dată. Dar chiar și un site obișnuit 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 citi „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 pătrate pentru evaluarea comentariilor. Au apărut în puterile utilizatorului ("Prettifier") cu aproximativ 3 ani în urmă și au fost adoptate în ZenComment cu aproximativ 2 ani în urmă. 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.

Bună ziua, dragi cititori ai site-ului blogului. Continuăm subiectul aspectului bloc, care a fost început și continuat în cele trei articole precedente. În principiu, am reușit deja să creăm atât un aspect de site cu două, cât și trei coloane și chiar am reușit să luăm în considerare nuanțele creării unui aspect fluid.

În plus, în primele articole despre aspectul site-ului (), au fost luate în considerare câteva concepte de bază ale webmasteringului, fără a înțelege care ar fi destul de greu de înțeles nuanțele.

Ce probleme ați avut cu aspectul site-ului nostru?

Astăzi vom încerca să rezolvăm o mică problemă care poate apărea cu aspectul pe care l-am creat mai devreme. Cel mai adesea, această situație apare la vizualizarea lui pe monitoare mari (cu rezoluție mare) și la afișarea unei pagini cu o cantitate mică de informații.

În acest caz, se poate dovedi că subsolul nu va fi apăsat în partea de jos a ecranului, ci va fi situat aproape la mijlocul său în înălțime, care în cele mai multe cazuri va arăta urât și inestetic.

Totuși, în opinia mea, trebuie să apăsați subsolul chiar în partea de jos a aspectului site-ului, iar acest lucru va fi valabil mai ales în cazul în care înălțimea paginii este mai mică decât înălțimea ecranului utilizatorului. Schematic, aceasta poate fi reprezentată după cum urmează:

Acestea. comportamentul corect al subsolului în cazul unei cantități mici de informații pe pagină și al unui ecran mare de utilizator va fi următorul:

Pentru a implementa acest lucru, trebuie să efectuăm o serie de manipulări cu codul aspectului nostru. Mai mult, vom face modificări nu numai la fișierul de stil CSS Style.css, ci și la Index.html, care conține cod HTML și formează blocuri Div. Dar mai întâi lucrurile.

De exemplu, vom folosi aspectul site-ului cu trei coloane pe care l-am creat mai devreme. În acest caz, Index.html va arăta astfel:

Și următoarele proprietăți CSS au fost scrise în fișierul Style.css:

Corp, html ( margin:0px; padding:0px; ) #maket ( width:800px; margin:0 auto; ) #header( background-color:#C0C000; ) #left( background-color:#00C0C0; width:200px ; float:left; ) #right( width:200px; background-color:#FFFF00; float:right; ) #content( background-color:#8080FF; margin-left:202px; margin-right:202px; ) #footer (culoare de fundal:#FFC0FF; clar:ambele; )

Ei bine, aspectul în sine arăta cam așa:

După cum puteți vedea, subsolul nu este apăsat în jos și, prin urmare, nu îndeplinește cerințele noastre (este întotdeauna situat sub coloana cea mai de jos), așa că va trebui să facem ajustări la cod. La fel se poate face și pentru aspectul cu două coloane, precum și pentru aspectul fluid. Metoda este universală.

Cum să împingeți subsolul în partea de jos a aspectului site-ului

Deci trebuie să mutăm subsolul Div în partea de jos a ecranului. Pentru a face acest lucru, mai întâi trebuie să setați înălțimea întregii pagini la sută la sută (va ocupa întregul ecran). Acest lucru va fi necesar pentru a redimensiona apoi blocul principal cu aspectul de asemenea până la 100%.

Tot conținutul paginii site-ului este plasat în etichetele Body de deschidere și de închidere și, prin urmare, trebuie să mai adăugăm o proprietate CSS pentru eticheta Body în Style.css care setează înălțimea la 100%:

Corp, html ( margin:0px; padding:0px; înălțime: 100%; )

Acest lucru nu va afecta în niciun fel aspectul, dar acum blogul principal poate fi extins la toată înălțimea ecranului. Acestea. a fost un fel de etapă pregătitoare.

Principalele proprietăți ale CSS, dacă doriți, le puteți vedea. Acum să setăm containerul Div care cuprinde întregul nostru aspect la o înălțime minimă de 100%:

De asemenea, vreau să-l evidențiez (div cu id="maket"). Pentru a face acest lucru, vom seta un cadru pentru acesta folosind proprietatea Border () corespunzătoare:

Chenarul proprietății: negru solid 3px vă permite să setați un chenar solid (solid) cu o grosime de 3 pixeli în negru pentru acest container. Acest lucru vă va permite să vedeți vizual că containerul cu aspectul este întins pe toată înălțimea ecranului, chiar și cu o cantitate mică de informații pe pagină:

Acum va trebui să scoatem blocul de subsol din containerul general și să îl așezăm dedesubt, imediat după cel general. Ce va da? Și faptul că, în cele din urmă, subsolul din layout se demnează să coboare și nu se va ghemui, ca înainte, la cea mai lungă coloană a sa. În acest caz, Index.html va arăta astfel:

Vă rugăm să rețineți că blocul de subsol nu se mai află într-un container comun (maket) și, prin urmare, lățimea lui nu mai este controlată de proprietățile CSS setate pentru maket în fișierul Style.css. Subsolul va fi întins pe toată lățimea ecranului, dar tot va fi situat în partea de jos a ecranului, imediat sub blocul principal:

Dar din nou există o problemă, deoarece pentru a vedea subsolul, acum trebuie să defilați ecranul în browser (vezi bara de defilare din figura de mai sus).

Se pare că acest lucru se datorează faptului că containerul principal (aspect) ocupă întreaga dimensiune a ecranului în înălțime (aceasta este determinată de înălțimea minimă: proprietatea 100%), iar subsolul este situat imediat în spatele lui și va trebui să utilizați derulând pentru a-l vizualiza, ceea ce nu este foarte convenabil și funcțional. .

Puteți rezolva această problemă dând o umplutură negativă containerului de subsol Div, astfel încât acesta să se miște la o distanță egală cu înălțimea sa. În acest caz, containerul de subsol va rula peste containerul principal și se va potrivi în înălțimea ecranului browserului (adică nu va trebui să utilizați derularea pentru a-l vizualiza).

Dar pentru a seta o indentație negativă din partea de sus, trebuie să cunoașteți aceeași înălțime de subsol, dar nu o știm încă.

Prin urmare, mai întâi setăm înălțimea containerului care conține subsolul setând proprietatea corespunzătoare în Style.css:

#footer(culoarea fundalului:#FFC0FF; clar:ambele; înălțimea: 50px; )

Și apoi îi setăm o umplutură negativă de sus la o înălțime egală cu înălțimea sa:

Acest lucru va permite subsolului să se ridice exact la propria înălțime și astfel să se potrivească în ecranul browserului (acum putem elimina chenarul: proprietate CSS neagră de 3px solidă din regula pentru maket, astfel încât grosimea marginii să nu împiedice întregul nostru aspect , împreună cu subsolul, de la încadrarea în ecran în înălțime):

După cum puteți vedea, acum bara de defilare nu apare în browser și întregul nostru aspect al site-ului bazat pe blocuri de trei coloane se potrivește pe un singur ecran (în cazul unei cantități mici de informații pe pagină) și are un subsol situat la foarte jos. Care este exact ceea ce trebuia să facem.

Introducem distanțierul și ne luptăm cu Internet Explorer

Dar există o problemă, care va apărea numai când există mai multe informații pe pagina de aspect și se poate întâmpla această situație:

Se pare că poate apărea o situație când informațiile dintr-una dintre coloanele aspectului vor ajunge în subsol, care nu va arăta frumos. Acest lucru se datorează căptușelii negative notorii pe care i-am stabilit-o, care ne-a ajutat să ne ridicăm subsolul în containerul de aspect principal.

Acestea. se dovedește că în partea de jos a ecranului există două blocuri care se suprapun unul pe altul în zona subsolului.

Soluția la această problemă este adăugarea unui nou container gol Div (numit distanţiere) în containerul principal al aspectului nostru (maket), în locul în care a fost amplasat mai devreme blocul cu subsolul.

Setând înălțimea acestui nou container la înălțimea subsolului, putem evita ca informațiile din containerul principal să se ciocnească de blocul de subsol. Să dăm acestui container un ID () numit Rasporka și, ca rezultat, Index.html al aspectului nostru cu trei coloane va arăta astfel:

Și în Style.css scriem pentru aceasta ( , care setează înălțimea acestui container de distanță egală cu înălțimea subsolului:

#rasporka ( înălțime: 50px; )

Ca urmare, subsolul va fi apăsat de jos nu către informațiile conținute în containerul principal (de exemplu, textul din coloana cea mai înaltă), ci către o zonă egală ca înălțime cu subsolul cu un container de distanță care nu conțin orice informație.

În acest fel, evităm coliziunile și distorsiunile în aspectul nostru pe trei coloane. Totul va fi clar și frumos (decență și noblețe):

După cum am menționat mai sus, lățimea subsolului ar trebui acum setată separat, deoarece. acest container nu mai face parte din cel principal. Pentru a face acest lucru, trebuie să adăugați proprietăți suplimentare pentru subsol la fișierul CSS, permițându-vă să setați lățimea și să o aliniați orizontal în mijlocul ecranului.

Este logic să setați lățimea egală cu lățimea întregului aspect utilizând proprietatea Width, iar alinierea orizontală se poate face în același mod ca și noi pentru întregul aspect pe aspectul bloc.

Astfel, va trebui să adăugăm proprietăți suplimentare pentru ID-ul de subsol:

#footer (culoare fundal:#FFC0FF; clar:ambele; înălțime: 20px; margin-sus:-20px; lățime:800px; margine-stânga: automat; margine-dreapta: automat; )

Folosind proprietatea width:800px, lățimea este setată la 800px, iar folosind cele două proprietăți margin-left: auto și margin-right: auto, marginile margin-stânga și dreapta ale subsolului sunt setate automat, drept urmare aceste marje vor fi egale, iar eroul nostru se va alinia la mijloc:

Ei bine, se pare că nu mai este nimic de îmbunătățit, dar așa a fost. Ca întotdeauna, browserul nostru preferat, Internet Explorer 6, nu înțelege ceva din proprietățile CSS pe care le folosim. În acest browser (și probabil și în unele altele vechi), în ciuda tuturor eforturilor noastre, subsolul nu va fi apăsat în partea de jos, dar se va lipi în continuare de coloana cea mai înaltă a aspectului site-ului.

Acest lucru se datorează faptului că ( nu înțelege înălțimea minimă: proprietatea 100% pe care am folosit-o pentru a seta înălțimea minimă a casetei principale să fie egală cu înălțimea ecranului.

Prin urmare, pentru a rezolva această problemă, va trebui să aplicăm așa-numitul hack, care ne permite să explicăm (pe degete) browserelor vechi ce să facem. Înainte de lista de proprietăți CSS pentru maket, va trebui să inserați următoarea combinație:

* html #make ( înălțime: 100%; )

Această regulă se va aplica doar pentru browserul Internet Explorer 6, restul nu o va ține cont și o va respecta.

Deci, aspectul final al Style.css cu subsolul apăsat în partea de jos a ecranului va fi după cum urmează:

Corp, html ( margin: 0px; padding: 0px; înălțime: 100%; ) * html #maket ( înălțime: 100%; ) #maket ( lățime: 800px; margin: 0 auto; min-height: 100%; ) # antet( culoarea fundalului:#C0C000; ) #stânga(culoarea fundalului:#00C0C0; lățime:200px; float:left; ) #right( lățime:200px; culoarea fundal:#FFFF00; float:right; ) #conținut (culoare de fundal:#8080FF; margine-stânga:202px; margine-dreapta:202px; ) #footer( culoarea fundalului:#FFC0FF; clar:ambele; înălțime: 50px; margin-sus:-50px; lățime:800px; margin-left: auto; margin-right: auto; ) #rasporka ( înălțime: 50px; )

Ei bine, forma finală a Index.html a fost dată puțin mai sus. Gata, această serie de articole dedicate amenajării în bloc a amenajărilor site-ului fix și cauciuc cu 2 și 3 coloane poate fi considerată finalizată.

De asemenea, puteți viziona videoclipul „Lucrul cu eticheta Html div”:

Multă baftă! Ne vedem curând pe site-ul paginilor blogului

Puteți viziona mai multe videoclipuri accesând

S-ar putea să fiți interesat

Aspect bloc - Creăm machete pe două, trei coloane și fluide pentru site
Aspect DiV - Creați blocuri pentru un aspect cu două coloane în HTML, determinați dimensiunile acestora și setați poziționarea în CSS

Îmi amintesc că în momentul în care am început să trec de la tabele la layout-uri prin div-uri, una dintre dificultățile pe care le-am întâlnit a fost următoarea - cum să împingeți subsolul site-ului (footer) în partea de jos a ferestrei browserului astfel încât pagina să pară întinsă la înălțimea ei completă, indiferent de cantitatea de text, iar dacă înălțimea paginii este mai mare decât înălțimea ferestrei browserului (când apare un defilare), subsolul ar rămâne la locul său.

În timp ce tabelele rezolvă această problemă doar prin specificarea înălțimii pentru tabel și/sau celula imbricată a acestuia, atunci când se utilizează CSS în aspectul blocului, se adoptă o abordare complet diferită.

În procesul de practică, m-am identificat pentru mine 5 moduri de a împinge subsolul în partea de jos a ferestrei browserului cu CSS.

Codul HTML al tuturor metodelor prezentate are următoarea structură (singura diferență este în codul CSS):

Codul CSS de mai jos include numai acele proprietăți care sunt minim necesare pentru implementarea metodei corespunzătoare. Pentru fiecare dintre ele puteți vedea un exemplu viu.

Prima cale

Subsolul este împins în jos prin poziționarea absolută a acestuia și tragerea de înălțimea blocurilor părinte (html , body și .wrapper) cu 100%. În acest caz, conținutul block.content trebuie să specifice o indentare de jos, care este egală sau mai mare decât înălțimea subsolului, altfel acesta din urmă va închide o parte a conținutului.

* ( margine: 0; umplutură: 0; ) html, corp ( înălțime: 100%; ) .wrapper ( poziție: relativă; înălțime minimă: 100%; ) .conținut ( padding-bottom: 90px; ) .footer ( poziție : absolut; stânga: 0; jos: 0; lățime: 100%; înălțime: 80px; )

A doua cale

Subsolul este apăsat în jos prin întinderea blocului de conținut și a „părinților” acestuia la înălțimea completă a ferestrei browserului și ridicând subsolul în sus prin marginea negativă (margin-top) pentru a scăpa de defilarea verticală care apare. În acest caz, este necesar să specificați înălțimea subsolului și trebuie să fie egală cu valoarea indentării.

* ( margine: 0; umplutură: 0; ) html, corp, .wrapper ( înălțime: 100%; ) .conținut ( dimensiunea casetei: border-box; min-height: 100%; padding-bottom: 90px; ) . subsol (înălțime: 80px; margine-sus: -80px; )

Datorită proprietății box-sizing: border-box, nu lăsăm caseta .content să depășească 100% înălțime. Deci, în acest caz, înălțimea minimă: 100% + padding-bottom: 90px este egal cu 100% din înălțimea ferestrei browserului.

A treia cale

Este bine pentru că, spre deosebire de alte metode (cu excepția celei de-a 5-a), înălțimea subsolului nu contează.

* ( margine: 0; padding: 0; ) html, body ( înălțime: 100%; ) .wrapper ( afișare: tabel; înălțime: 100%; ) .conținut ( afișare: masă-rând; înălțime: 100%; )

Aici emulăm comportamentul unui tabel transformând blocul .wrapper într-un tabel și blocul .content într-un rând de tabel (afișare: tabel și, respectiv, afișare: proprietăți table-row). Datorită acestui fapt, precum și faptului că blocul .content și toate containerele sale părinte sunt setate la o înălțime de 100%, conținutul este întins la înălțimea completă, dar minus înălțimea subsolului, care este determinată automat - Emularea tabelului nu permite ca subsolul să iasă cu crawlere din înălțimea ferestrei browserului.

Ca rezultat, subsolul este apăsat în jos.

A patra cale

Această metodă este diferită de oricare dintre cele anterioare, iar particularitatea ei este utilizarea funcției CSS calc() și a unității de măsură vh, care sunt acceptate doar de browserele moderne. Aici trebuie să știți înălțimea exactă a subsolului.

* ( marja: 0; umplutură: 0; ) .conținut ( înălțime minimă: calc(100vh - 80px); )

100vh este înălțimea ferestrei browserului, iar 80px este înălțimea subsolului. Și cu ajutorul funcției calc(), scădem a doua valoare din prima, apăsând astfel subsolul în partea de jos.