Cum să setați înălțimea unui element HTML la 100%

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 a

înălțime: 100px;

va ocupa 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 a

î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ăţime
la

lățime: 100%;
elementul va ocupa întregul spațiu orizontal al paginii, deci

înălţime
ar trebui să lucreze 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.

lăţime
Dacă nu stabiliți nicio valoare în documente, 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 deloc, cu excepția cazului în care conținutul este atât de lung încât să meargă în afara portului de vizualizare (care necesită astfel bare de defilare) sau dacă designerul web stabilește un absolut pentru un element pe pagină.

înălţime
Î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 valoare implicită.

înălțime: 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 procent, trebuie să setați înălțimea de fiecare elementul elementar al celui 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 că vrei

div
iar paragraful din ea are o înălțime de 100%, dar de fapt div are Două Elemente de bază:

și. Pentru a defini înălțimea

div
la o înălțime relativă, trebuie să setați înălțimea

corp
și

html
elemente, de asemenea. Așadar, va trebui să utilizați CSS pentru a seta înălțimea nu numai a elementului div, 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.Una dintre cele mai enervante lucruri pe care le-am găsit cu lucrul cu înălțimile procentuale (și lățimile) 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-ați setat

auto,
barele de derulare vor apărea dacă 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.