Subsol corect. Subsol fix
02.05.15 21.5KAcesta 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?
Văd, apoi stai și nu faci nimic până nu citești articolul nostru până la sfârșit.
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-urile de site-uri web care au fost realizate în grabă, pe cont propriu, suferă de acest dezavantaj ( 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 toate opțiunile posibile pentru eliminarea acestei probleme:
Prima cale
Prima modalitate de a „lega” subsolul „în partea de jos” a paginii se bazează 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: auto !important; înălțime: 100%; ; ) #footer ( lățime: 1000px; margine: -100px auto 0; înălțime: 100px; poziție: relativă; culoare de fundal: rgb(51,51,204); )
Pentru a atașa o etichetă de subsol în partea de jos a paginii
html ( înălțime: 100%; ) corp ( înălțime: 100%; )
De asemenea, am stabilit înălțimea minimă a stratului de container la 100%. În cazul în care lățimea conținutului este mai mare decât înălțimea containerului, setați proprietatea la auto . Datorită acestui fapt, wrapper-ul se va ajusta automat la lățimea conținutului plasat pe pagină:
#wrapper ( înălțime minimă: 100%; înălțime: automat !important; înălțime: 100%; )
Linia de cod „înălțime: 100%” este destinată versiunilor mai vechi de IE care nu acceptă proprietatea min-height.
Pentru a separa spațiul pentru un subsol în designul paginii, setăm o indentare pentru etichetă
#conținut ( umplutură: 100px; )
În această etapă, avem o pagină web care are tot ecranul lat și 100 de pixeli suplimentari, care este „neutralizată” printr-o valoare a marjei negative pentru subsol (marja: -100px) cu poziția sa setată la relativă (poziție: relativă) . Deci, folosind o valoare de umplutură negativă, „tragem” subsolul în zona containerului, care are înălțimea setată la 100%.
În acest exemplu, marcajul documentului web este specificat utilizând etichete HTML 5 relativ noi, care este posibil să nu fie interpretate corect de browserele mai vechi. Din acest motiv, este posibil ca întregul design al paginii să nu fie afișat corect. Pentru a evita acest lucru, trebuie să înlocuiți noile etichete din arsenalul versiunii 5 a limbajului hipertext cu unele obișnuite.
Versiune îmbunătățită
Metoda discutată mai sus despre cum să faceți subsolul din partea de jos a paginii „de nezdruncinat” nu este potrivită pentru toată lumea. Dacă în viitor veți modifica și îmbunătăți designul site-ului dvs. folosind ferestre pop-up, atunci este mai bine să nu mai utilizați implementarea anterioară.
Proprietatea CSS cel mai frecvent utilizată pentru ferestrele pop-up este z-index . Folosind valorile sale, specificați ordinea în care straturile sunt stivuite unul peste altul.
Cu cât valoarea indicelui z a unui element este mai mare, cu atât va apărea mai mare în stiva generală de „stratificare”.
Dar pentru că am folosit o valoare de umplere negativă pentru subsol în exemplul anterior, partea de jos a ferestrei pop-up se va suprapune pe zona de subsol de sus. Chiar dacă va avea o valoare mai mare a indicelui z. Deoarece părintele (învelișul) ferestrei pop-up mai are o valoare mai mică pentru această proprietate.
Iată o opțiune mai avansată:
CSS - exemplu de cod:
html, body ( înălțime: 100%; ) .header ( înălțime: 120px; culoare de fundal: rgb(0,255,102); ) .main ( înălțime min: 100%; poziție: relativă; culoare de fundal: rgb(100,255,255); ) .footer (înălțime:150px; poziție: absolut; stânga: 0; jos: 0; lățime: 100%; culoare de fundal: rgb(0,0,153); )
După cum puteți vedea din cod, am plasat subsolul ca parte a elementului principal. Am stabilit poziționarea relativă pentru container și poziționarea absolută pentru subsol. Am fixat subsolul chiar în partea de jos a containerului, setându-i poziția în stânga și sus la 0.
Opțiune pentru un subsol cu o înălțime nefixă
Implementările anterioare pot asigura că subsolul este întotdeauna în partea de jos a paginii. Dar numai dacă subsolul are o lățime fixă. Dar ce se întâmplă dacă cantitatea de conținut postată în el nu poate fi prezisă?
Salutare tuturor!
Site-ul arată plăcut din punct de vedere estetic dacă toate elementele sale sunt la locul lor. Cu toate acestea, există adesea cazuri în care totul pare să fie normal, dar ceva nu este încă în neregulă... De exemplu, dacă pagina este scurtă, subsolul nu este apăsat în partea de jos a paginii, ci este situat acolo unde ar trebui să fie - după blocul principal al site-ului. Nu arata foarte frumos.
Prin urmare, astăzi vă vom vorbi despre cum să apăsați subsolul site-ului în marginea de jos a ferestrei browserului.
Deci, vom stabili următoarele cerințe pentru subsol:
- subsolul este apăsat în partea de jos a ecranului atunci când înălțimea ferestrei browserului este mai mare decât înălțimea paginii, indiferent de conținut;
- subsolul este la locul său când volumul de conținut este mai mare decât înălțimea ferestrei browserului;
- funcționează în toate browserele populare;
- fiabilitate - nu depinde de complexitatea aspectului.
De exemplu, să luăm o pagină simplă formată din două blocuri principale: cel principal și subsolul. Să ne asigurăm că blocul principal ocupă întreaga zonă a ferestrei browserului, indiferent de cantitatea de conținut, în timp ce apăsăm subsolul în partea de jos a ecranului, astfel încât o bară de defilare verticală să nu apară în browser. Cum o facem:
Pasul 1
Realizam 2 blocuri: principal (principal) si subsol (subsol). Întindem containerul principal la toată înălțimea ecranului browserului (înălțimea minimă) și specificăm cu strictețe înălțimea subsolului (înălțimea).
În acest caz, înălțimea totală a site-ului va fi înălțimea ecranului + înălțimea subsolului.
Pasul 2
Folosim o marjă negativă (margin-top) pentru a „intra” în blocul principal, astfel încât înălțimea site-ului să fie doar 100% din înălțimea ecranului.
Cu această aranjare a blocurilor și cu o cantitate suficientă de conținut (de exemplu, text) în blocul principal, este posibil să suprapuneți conținutul din blocul principal pe subsol:
Pasul 3
Pentru a evita această potențială problemă, adăugați un bloc gol la sfârșitul blocului principal, a cărui înălțime nu este mai mică decât înălțimea subsolului (sau mai bine, puțin mai mult, astfel încât să existe un spațiu între conținut și subsol):
Acum, dacă există mult conținut, va muta blocul gol în jos. Și acest lucru va coborî subsolul, împiedicând conținutul să se potrivească pe el.
Să vedem cum arată în cod:
| <html> <cap> <titlu > Subsolul este apăsat în partea de jos</titlu> <tip stil = "text/css" >* (marja: 0; padding: 0;) /* resetează padding */ body ( background: #fff;) html,body ( înălțime: 100%; /* setează înălțimea corpului documentului */) .main ( /* bloc principal , care ar trebui să se întindă la subsol */ fundal: #999 /* culoarea de fundal a blocului principal (pentru claritate) */ înălțimea minimă: 100% /* setează înălțimea minimă a blocului principal *; /) * html .main ( /* hack pentru ie6 */ înălțime: 100%; /* pentru ie6, pentru că nu înțelege min-height */).hFooter ( /* acesta este un distanțier în blocul principal - noi rezervă spațiu pentru subsol */ înălțime: 40px; /* înălțime subsolul nostru */).footer ( /* subsol */ fundal: #0000CC; /* culoare de fundal subsol (pentru claritate) */ culoare: #fff; înălțime: 40px /* înălțimea subsolului */ margin-top: -40px ;</stil> </cap> <corp > <div class = "principal" > Acesta este blocul principal<div class = "hFooter" > </div> <div class = "subsol" > Acesta este subsolul</div> </corp> </html> |
Notă: Când utilizați un aspect de bloc și blocuri principale (coloane) plutitoare pentru .hFooter, ar trebui să adăugați clear: ambele astfel încât subsolul să fie situat sub coloane.:
| .hFooter ( clar : ambele ; înălțime : 40 px ; ) |
Dacă ați stăpânit deja puțin, atunci poate apărea întrebarea: „De ce să folosiți un element suplimentar când puteți utiliza padding-bottom?”
Răspunsul este că nu îl puteți folosi doar aici, deoarece dimensiunea blocului este egală cu dimensiunile sale + lățimea căptușelii interne + lățimea chenarelor. O combinație de înălțime minimă: 100% și partea de jos a căptușelii va oferi site-ului înălțimea mai mare decât înălțimea ecranului. Drept urmare, chiar dacă nu există deloc conținut, subsolul va fi în afara ecranului.
Dezavantajul acestei tehnici este utilizarea unui element suplimentar hFooter gol. În condiții reale (când conținutul site-ului nu este gol și se folosește aspectul bloc), acest lucru poate fi evitat prin utilizarea acestei tehnici pentru a ajuta la curățarea fluxului fără a utiliza un element suplimentar și pentru a preveni interferarea conținutului cu subsolul, vom scrie padding-bottom în coloane.
Probleme cu straturile z
În tehnica descrisă mai sus, subsolul a fost ridicat cu o liniuță negativă în sus. Acest lucru ridică o problemă potențială cu straturile z. De exemplu, trebuie să arătăm o fereastră pop-up (să fie un div), care va fi poziționată în raport cu containerul principal.
| <div class = "principal" > [...] <div class = "popup" > [...] </div> </div> <div class = "subsol" > [...] </div> |
| .principal ( pozitie : relativ ; z-index : 1 ; /* z-index mai mic decât cel al subsolului, astfel încât să fie vizibil */) .popup ( poziție : absolut ; z-index : 100 ; [ ...] ) .footer ( înălțime : 50px ; margin-top : -50px ; poziție : relativă ; /* astfel încât să puteți seta indexul z */ indicele z: 2; /* mai mult decât principal să fie vizibil */} |
Totul este bine până când fereastra pop-up și subsolul nostru se intersectează (și această situație apare destul de des) - aici încep problemele. În ciuda faptului că fereastra pop-up are cel mai mare indice z, aceasta va fi suprapusă de subsol, deoarece pop-up-ul părinte are un z-index mai mic decât subsolul:
În acest caz, trebuie să căutați o oportunitate de a poziționa fereastra nu relativ la principal, ci față de un alt element copil care se află în interiorul principal. Astfel, vom scăpa de specificarea z-index pentru main și subsol. Dar această opțiune nu este întotdeauna posibilă, așa că să luăm în considerare a doua opțiune de apăsare a subsolului.
Soluția 2 - poziționare absolută
Ideea este similară cu soluția 1:
- Întindem blocul principal pe toată înălțimea ecranului;
- Rezervam spatiu pentru subsol;
- Față de blocul principal, poziționăm subsolul în partea de jos folosind poziționarea absolută.
HTML: relativ; /* astfel încât elementele copil să fie poziționate în raport cu acest bloc */) .footer ( înălțime : 50px ; poziție : absolut ; stânga : 0 ; jos : 0 ; lățime : 100% ; ) * html .footer ( bottomy : expression(parentNode.offsetHeight % 2 ? style.bottom= "-1px" : style.bottom= "0px" ); /* hack for e6, care are un jamb cu un offset de 1px */}
Această abordare va rezolva problema cu ferestrele pop-up, deoarece... atât footer-ul, cât și popup-ul vor avea un părinte comun, ceea ce înseamnă că nu vor exista surprize cu straturi-z.
Dezavantajul ambelor metode este că ambele metode sunt potrivite doar pentru un subsol cu o înălțime fixă.
Asta e tot pentru azi. Acum știți cum să apăsați subsolul în partea de jos a ecranului în diferite moduri și ce probleme pot apărea.
Abonați-vă la actualizări și așteptați cu nerăbdare noi publicații interesante. la revedere.
Îmi amintesc că în momentul în care am început să trec de la aspectul tabelelor la aspectul div, una dintre dificultățile pe care le-am întâlnit a fost următoarea - cum să împingeți subsolul site-ului în partea de jos a ferestrei browserului, astfel încât pagina să apară alungită la înălțimea sa completă, indiferent de volumul de text, iar dacă înălțimea paginii este mai mare decât înălțimea ferestrei browserului (când apare un scroll), subsolul ar rămâne la locul său.
Dacă cu ajutorul tabelelor această problemă este rezolvată doar prin specificarea înălțimii pentru tabel și/sau celula imbricată în acesta, atunci când se folosește CSS în aspectul bloc, se folosește o abordare complet diferită.
În procesul de practică, m-am identificat pentru mine 5 moduri de a strânge subsolul în partea de jos a ferestrei browserului folosind CSS.
Codul HTML al tuturor metodelor prezentate are următoarea structură (singura diferență este 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 apăsat în jos, poziționându-l absolut și extinzând înălțimea blocurilor părinte (html , body și .wrapper) la 100%. În acest caz, conținutul block.content trebuie să specifice o marjă de jos care este egală sau mai mare decât înălțimea subsolului, altfel subsolul va acoperi o parte din conținut.
* ( margine: 0; padding: 0; ) html, body ( înălțime: 100%; ) .wrapper ( poziția: relativă; min-height: 100%; ) .content ( padding-bottom: 90px; ) .footer ( poziția : absolut; latime: 100%;
A doua cale
Subsolul este apăsat trăgând blocul de conținut și „părinții” acestuia la înălțimea completă a ferestrei browserului și ridicând subsolul printr-o marjă negativă (margin-sus) pentru a scăpa de defilarea verticală care apare. În acest caz, este necesar să se indice înălțimea subsolului și trebuie să fie egală cu cantitatea de indentare.
* ( 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, împiedicăm cutia cu clasa .conținut să depășească 100% înălțime. Adică, î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 și faptului că blocul .content și toate containerele sale părinte sunt setate la 100% înălțime, conținutul este întins la înălțimea sa maximă, minus înălțimea subsolului, care este determinată automat - emularea tabelului împiedică extinderea subsolului. dincolo de înălțimea ferestrei browserului.
Ca urmare, subsolul este apăsat în partea de jos.
A patra metodă
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 folosind funcția calc() scădem a doua valoare din prima, apăsând astfel subsolul în partea de jos.
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 depinde de cantitatea conținutului acestora, 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):
În continuare, blocuri suplimentare, proprietăți CSS etc. vor fi adăugate la aspect pentru a obține rezultatul dorit. 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
- Toate blocurile de aspect au fost împachetate într-un bloc de înveliș suplimentar id="wrapper" căruia i s-a dat o înălțime minimă (proprietatea CSS) de 100%, astfel încât să se întindă la înălțimea completă a ferestrei browserului, dar să se întindă mai mult dacă este necesar. 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.
- Următorul pas a fost poziționarea absolută (CSS) a subsolului în raport cu blocul de înveliș în partea de jos (CSS). Astfel, subsolul nostru a fost apăsat în partea de jos a paginii.
- 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.
- 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ă susțineți IE6 și IE7, atunci în loc de acest bloc puteți aplica un pseudo-element ultimului bloc înainte de subsol (aici este „conținut”) și pur și simplu să întrerupeți fluxul acestuia.
În primul paragraf, a fost folosită o proprietate CSS pentru a indica înălțimea minimă, pe care Internet Explorer 6 nu o înțelege, dar înțelege proprietatea la fel ca înălțimea minimă. De asemenea, acest browser ignoră regula în anumite cazuri. Aceste două caracteristici au fost folosite î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
- 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.
- 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 ridica în vizibilitate, i-a fost stabilită o marjă negativă superioară (CSS), a cărei dimensiune este egală cu înălțimea subsolului în sine. Gata, subsolul este apăsat și situat în partea de jos a paginii.
- Deoarece în paragraful anterior am specificat o marjă negativă superioară pentru subsolul apăsat, atunci când adăugați informații la blocuri cu 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.
- 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ă.
