Legați subsolul la partea de jos a paginii css. Subsol fix

Cum împingeți subsolul în partea de jos a paginii? Această întrebare este pusă de mulți dintre cei care au întâlnit aspectul layout-urilor site-ului web. Faptul este că, dacă înălțimea blocurilor din aceste aspecte nu este specificată în mod explicit, atunci aceasta depinde de cantitatea conținutului lor; în consecință, dacă acest conținut este suficient de mic, atunci întregul aspect poate ocupa o înălțime mai mică decât fereastra browserului. . Desigur, toate acestea nu arată foarte bine. Acum vă voi arăta mai multe modalități de a împinge subsolul în partea de jos a paginii și, astfel, de a face aspectul mai atractiv și mai familiar.

În fiecare dintre exemple vom pleca de la faptul că aspectul site-ului are această structură obișnuită (dispunerea dvs. poate varia, dar metodele sunt universale):

Următorul de realizat rezultatul cerut Blocuri suplimentare, proprietăți CSS etc. vor fi adăugate la aspect. Cu toate acestea, în aspectul în care ați decis să împingeți subsolul în partea de jos a paginii, aceste blocuri sau unele proprietăți pot fi deja prezente, deci nu este nevoie să le adăugați din nou. Toate proprietățile CSS care sunt direct implicate în fixarea subsolului în partea de jos sunt furnizate cu comentarii.

Apăsați subsolul în partea de jos folosind poziționare

Descrierea exemplului

1. Toate blocurile de layout au fost închise în bloc suplimentar-wrapper id="wrapper" , căruia i s-a dat o înălțime minimă ( proprietate CSS) egal cu 100%, astfel încât să se întindă la toată înălțimea ferestrei browserului, dar dacă este necesar, se poate întinde și mai mult. Cu toate acestea, deoarece valorile procentuale sunt calculate în raport cu strămoșul, pentru ca acest lucru să funcționeze, a trebuit să specificăm în mod explicit înălțimea (CSS) pentru etichete și.
2. Urmatorul pas a devenit poziționarea absolută (CSS) a subsolului în raport cu blocul de înveliș pe partea sa inferioară (CSS). Astfel, subsolul nostru a fost apăsat în partea de jos a paginii.
3. Deoarece poziționarea absolută scoate elementul din flux, atunci când adăugați informații la blocuri cu conținut și meniuri, o parte din aceasta va trece sub subsolul apăsat. Pentru a preveni acest lucru, elementele id="content" și id="menu" au fost setate să aibă o umplutură de jos (CSS) egală cu înălțimea subsolului. Acum ei vor fi cei care vor intra sub subsol și îl vor împinge în jos.
4. Deoarece în aspectul nostru blocul cu meniul este plutitor (CSS), subsolul tot nu îl va observa și, în consecință, meniul nu îl va împinge în jos. Pentru a remedia acest lucru, a fost creat un alt bloc (class="clear") care rupe împachetarea (proprietatea CSS). Apropo, dacă nu intenționați să acceptați IE6 și IE7, puteți aplica acest bloc la ultimul blocînainte de subsol (aici este „conținut”) un pseudo-element și faceți doar o întrerupere a fluxului pe el.

În primul punct, a fost aplicată o proprietate CSS pentru a specifica o înălțime minimă, ceea ce nu înțelege Internet Explorer 6. Dar el înțelege proprietatea ca doar înălțimea minimă. De asemenea, acest browser ignoră regula în anumite cazuri. Aceste două caracteristici au fost utilizate în în acest exemplu pentru a crea haka pentru a-l face să facă ceea ce trebuie să facă fără a afecta alte browsere.

Apăsați subsolul în partea de jos folosind blocuri suplimentare

Descrierea exemplului

1. Toate blocurile de aspect, cu excepția subsolului, au fost împachetate într-un bloc suplimentar id="wrapper", care a fost setat la o înălțime minimă (CSS) de 100%. Acest lucru a fost făcut astfel încât învelișul blocului să se întindă cel puțin la înălțimea completă a ferestrei browserului, dar dacă este necesar (dacă era mult conținut) s-ar putea întinde și mai mult. Acum, înălțimea wrapper-ului nostru este egală cu înălțimea ferestrei browserului, iar înălțimea întregii pagini HTML = înălțimea wrapperului + înălțimea subsolului.
2. Ca urmare a acțiunilor din primul punct, deși subsolul nostru a fost apăsat în partea de jos a paginii, a depășit marginea de jos a ferestrei browserului, ceea ce nu este bine. Pentru a-l aduce la vedere, i s-a atribuit o marjă negativă superioară (CSS) a cărei dimensiune egală cu înălțimea subsolul propriu-zis. Gata, subsolul este apăsat și situat în partea de jos a paginii.
3. Din moment ce în paragraful anterior Am specificat o marjă negativă superioară pentru subsolul apăsat, apoi atunci când adăugați informații la blocuri de conținut sau meniuri, o parte din aceasta va trece sub acest subsol. Pentru a evita acest lucru, a fost creat un alt bloc cu id="footer_correct" , a cărui înălțime este egală (puteți să-l măriți și puțin) cu înălțimea subsolului. Astfel, acest bloc corectiv este cel care va merge sub subsolul apăsat și îl va împinge în jos, împiedicând ascunderea informațiilor.
4. La blocul de ajustare a fost adăugată o întrerupere a împachetarii (CSS) pentru a-l împiedica să se încadreze în meniu dacă depășește înălțimea conținutului. În consecință, această întrerupere a fluxului a fost eliminată din subsol ca fiind inutilă.

Ca și în primul exemplu, pentru IE6 a fost folosit aici un hack special care vă permite să setați înălțimea minimă.

Acesta este un fel de coșmar! De ce subsolul site-ului tău „apare” din nou și schimbă designul? Este chiar imposibil să apăsați corect subsolul din partea de jos a paginii cu ceva? Conținut sau cărămizi măcar! Cărămida nu se potrivește în monitor?

Realizarea subsolului potrivit pentru site-ul dvs

Mulți proprietari de site-uri web se confruntă cu această problemă atunci când subsolul paginii plutește pur și simplu în partea de sus. Și atunci nu este clar ce să faci. Cel mai adesea, design de site-uri realizate pe o remediere rapidă, pe cont propriu ( cerc" mâini nebune» ) sau webmasteri începători.

În același timp, nu se întâmplă nimic groaznic în primele etape ale vieții site-ului. Și această idilă continuă atâta timp cât conținutul își pune „greutatea” pe subsol, împiedicându-l să se ridice. Dar merită să plasați volume mai mici de material pe pagină, iar subsolul recent „calm” se ridică instantaneu în partea de sus, aducând întregul design al site-ului într-un aspect nepotrivit.

Pentru a elimina acest „defect” al șablonului proiectat, nu este necesar să cheltuiți bani pe serviciile unui webmaster. Cel mai adesea, subsolul site-ului poate fi instalat singur. Să luăm în considerare totul opțiuni posibile Pentru a rezolva această problemă:

Prima cale

Pe primul mod de a „lega” subsolul „în partea de jos” a paginii se bazează Bazat pe CSS. Să începem cu exemplul de cod și apoi să aruncăm o privire mai atentă asupra implementării acestuia:

html ( înălțime: 100%; ) antet, navigare, secțiune, articol, deoparte, subsol ( afișare: bloc; ) corp ( înălțime: 100%; ) #wrapper ( lățime: 1000px; margine: 0 auto; înălțime minimă: 100 %; înălțime: automat !important; înălțime: 100%; ) #header (înălțime: 150px; culoarea fundalului: rgb(0.255.255); ) #conținut (padding: 100px; înălțimea: 400px; culoarea fundalului: rgb(51.255.102) ; ) #footer ( lățime: 1000px; margine: -100px auto 0; înălțime: 100px; poziție: relativă; culoarea fundalului: rgb(51,51,204); )

Pentru a atașa o etichetă de subsol în partea de jos a paginii