O întrebare obișnuită în proiectarea site-ului web este "cum stabiliți înălțimea unui element la 100%"?
Acest lucru poate părea un răspuns ușor. Pur și simplu utilizați CSS pentru a seta înălțimea unui element la 100%, dar acest lucru nu întinde întotdeauna acel element pentru a se potrivi întreaga fereastră a browserului. Să aflăm de ce se întâmplă acest lucru și ce puteți face pentru a obține acest stil vizual.
Pixeli și procente
Când definiți înălțimea unui element utilizând proprietatea CSS și o valoare care utilizează pixeli, acel element va ocupa acel spațiu vertical în browser.
De exemplu, un paragraf cu o înălțime: 100px; va lua până la 100 de pixeli de spațiu vertical în design.Nu contează cât de mare este fereastra browserului dvs., acest element va avea 100 de pixeli în înălțime.
Procentajele funcționează diferit decât pixelii. Conform specificației W3C, înălțimile procentuale sunt calculate în funcție de înălțimea recipientului. Deci, dacă puneți un paragraf cu o înălțime: 50%; în interiorul unui div cu o înălțime de 100px, paragraful va avea 50 de pixeli în înălțime, ceea ce reprezintă 50% din elementul părinte.
De ce nu se înregistrează înălțimile procentuale
Dacă proiectați o pagină Web și aveți o coloană pe care doriți să o ocupați cu toată înălțimea ferestrei, înclinația naturală este să adăugați o înălțime: 100%; la acel element. La urma urmei, dacă setați lățimea la lățime: 100%; elementul va ocupa spațiul orizontal complet al paginii, astfel încât înălțimea ar trebui să funcționeze la fel, nu? Din păcate, acest lucru nu este cazul deloc.
Pentru a înțelege de ce se întâmplă acest lucru, trebuie să înțelegeți modul în care browserele interpretează înălțimea și lățimea. Browserele Web calculează lățimea totală disponibilă în funcție de cât de largă este deschisa fereastra browserului. Dacă nu stabiliți valori ale lățimii documentelor dvs., browserul va curge automat conținutul pentru a umple întreaga lățime a ferestrei (lățimea 100% este cea implicită).
Valoarea înălțime este calculată diferit decât lățimea. De fapt, browserele nu evaluează înălțimea, cu excepția cazului în care conținutul este atât de lung încât să meargă în afara ferestrei de vizualizare (necesitând astfel bare de defilare) sau dacă designerul web stabilește o înălțime absolută pentru un element pe pagină. În caz contrar, browserul permite pur și simplu fluxului de conținut în lărgimea ferestrei de vizualizare până când ajunge la final. Înălțimea nu este calculată deloc.
Problemele apar atunci când setați o înălțime procentuală pe un element care are elemente părinte fără setări de înălțime - cu alte cuvinte, elementele părinte au o înălțime implicită: auto; . Sunteți, de fapt, solicitați browserului să calculeze o înălțime de la o valoare nedefinită. Deoarece aceasta ar fi egală cu o valoare nulă, rezultatul este că browserul nu face nimic.
Dacă doriți să setați o înălțime pe paginile dvs. web la un procentaj, trebuie să setați înălțimea fiecărui element părinte al aceluia pe care doriți ca înălțimea să fie definită. Cu alte cuvinte, dacă aveți o pagină ca aceasta:
Conținutul aici
Probabil doriți div și paragraful din ea să aibă o înălțime de 100%, dar div are de fapt două elemente părinte:
și. Pentru a defini înălțimea div la o înălțime relativă, trebuie să setați și înălțimea corpului și a elementelor html.
Deci, va trebui să utilizați CSS pentru a seta înălțimea nu numai a divului, ci și a corpului și a elementelor html. Aceasta poate fi o provocare, deoarece puteți obține repede copleșirea cu tot ce este setat la înălțimea de 100%, numai pentru a obține acest efect dorit.
Unele lucruri de notat când lucrați cu înălțimi de 100%
Acum că știți cum puteți seta înălțimea elementelor dvs. de pagină la 100%, poate fi interesant să ieșiți și să faceți acest lucru pentru toate paginile dvs., dar există câteva lucruri pe care ar trebui să le cunoașteți:
- Marginile și straturile de umplutură pot adăuga o bară de defilare în cazul în care nu doriți unul. Unul dintre cele mai enervante lucruri pe care le-am găsit cu lucrul cu înălțimi procentuale (și lățimi) este că atunci căptușeala și marginile acelorași elemente pot adăuga bare de defilare în pagină, chiar dacă tot conținutul se afișează fără a avea nevoie de bare de derulare. Acest lucru se datorează faptului că înălțimea sau lățimea elementului este primul lucru care este calculat. Apoi margini și padding sunt adăugate pe. Deci, dacă aveți un element cu o înălțime de 100% și margini de sus și de jos de 10 pixeli fiecare, va exista o bară de defilare pentru cei 20 de pixeli suplimentari. Rețineți că modelul cutie CSS adaugă marginea, marginea și umplutura pe dimensiunea unui element, astfel încât 100% cu oricare din celelalte valori ale modelului cutiei va fi de fapt mai mare de 100%.
- Dacă conținutul dvs. ocupă mai mult decât înălțimea definită, acesta va suprascrie orice după el. Cu alte cuvinte, dacă aveți un design cu o coloană cu o înălțime de 80%, iar conținutul care se află în interiorul acestuia va ocupa 100% din înălțime, în plus, 20% vor continua sub coloană și ar sparge designul vizual din pagina dvs. Dacă există conținut sub această coloană, textul va scrie pur și simplu în partea superioară a acesteia. Deseori văd că acest lucru se întâmplă când un designer de web încearcă să forțeze înălțimea unei pagini și o face să funcționeze perfect pentru lansare, dar când conținutul pe acea pagină se schimbă în viitor, înălțimile absolute ale acesteia încalcă total fluxul paginii. Acest lucru este valabil de două ori atunci când construiți site-uri web receptive a căror lățime și înălțime trebuie să se schimbe în funcție de dimensiunea ferestrei de vizualizare.
Pentru a rezolva aceasta, puteți seta și înălțimea elementului. Dacă îl setați automat, vor apărea bare de defilare dacă acestea sunt necesare, dar vor dispărea atunci când nu sunt. Acest lucru stabilește pauza vizuală, dar adaugă bare de derulare în cazul în care este posibil să nu le doriți.
Utilizarea unităților de vizualizare
Un alt mod în care puteți aborda această provocare este experimentarea cu unitățile de vizualizare CSS. Folosind unitatea de măsură a înălțimii pentru ferestrele de vizualizare , puteți dimensiona elementele pentru a prelua o înălțime definită a ferestrei de vizualizare și care se va schimba la modificarea ferestrei de vizualizare! Aceasta este o modalitate excelentă de a obține vizuale pe o pagină de înălțime de 100%, dar totodată să fie flexibile pentru diferite dispozitive și dimensiuni ale ecranului.