Kako postaviti visinu HTML elementa na 100%

Uobičajeno postavljeno pitanje u web dizajnu je "kako postaviti visinu elementa na 100%"?

Ovo može izgledati kao jednostavan odgovor. Jednostavno upotrijebite CSS da biste postavili visinu elementa na 100%, ali to se uvijek ne proteže kako bi odgovarao cijelom prozoru preglednika. Doznajemo zašto se to dogodi i što možete učiniti kako biste postigli ovaj vizualni stil.

Piksela i postotaka

Kada definirate visinu elementa pomoću svojstva CSS i vrijednosti koja koristi piksel, taj će element u pregledniku zauzeti toliko vertikalnog prostora. Na primjer, odlomak s a

visina: 100px;

u vašem dizajnu zauzimaju 100 piksela vertikalnog prostora. Nije bitno koliko je vaš prozor preglednika veći, ovaj element bit će 100 piksela visine.

Postotci različito funkcioniraju od piksela. Prema specifikaciji W3C, visine postotka izračunate su u odnosu na visinu kontejnera. Dakle, ako stavite stavku s a

visina: 50%;
unutar diva s visinom od 100 piksela, odlomak će biti 50 piksela visine, što je 50% njegovog roditeljskog elementa.

Zašto postotak visine ne uspije

Ako izrađujete web stranicu i imate stupac koji želite preuzeti punu visinu prozora, prirodni je naglasak dodati

visina: 100%;
na taj element. Uostalom, ako postavite

širina
do

širina: 100%;
element će zauzeti cijeli horizontalni prostor stranice, tako da

visina
treba raditi isto, zar ne? Nažalost, to uopće nije slučaj.

Da biste shvatili zašto se to dogodi, morate razumjeti kako pretraživači tumače visinu i širinu. Web preglednici izračunavaju ukupnu dostupnu širinu kao funkciju otvaranja prozora preglednika.

širina
Ako ne postavite nikakve vrijednosti na svoje dokumente, preglednik će automatski tijek sadržaja kako bi popunio cijelu širinu prozora (100% širina je zadana).

Visina vrijednosti izračunava se različito od širine. U stvari, preglednici ne procjenjuju visinu uopće osim ako sadržaj nije toliko dugo da ide izvan okvira (time zahtijeva trake za pomicanje) ili ako web dizajner postavlja apsolutni element elementa na stranici.

visina
Inače, preglednik jednostavno dopušta protok sadržaja unutar širine prozora dok se ne završi. Visina zapravo uopće nije izračunata.

Problemi nastaju kada postavite visinu postotka na elementu koji ima elemente roditelja bez postavljanja visine - drugim riječima, osnovni elementi imaju zadanu vrijednost.

visina: auto;
Zapravo ste tražili da preglednik izračuna visinu od nedefinirane vrijednosti. Budući da bi bila jednaka null vrijednosti, rezultat je da preglednik ne radi ništa.

Ako želite postaviti visinu na web stranicama na postotak, morate postaviti visinu svaki roditeljski element onog kojeg želite definirati visinu. Drugim riječima, ako imate ovakvu stranicu:

Sadržaj ovdje
Vjerojatno hoćeš

div
i stavak u njemu da ima 100% visine, ali taj div zapravo ima dva roditeljski elementi:

i. Kako bi se odredila visina

div
do relativne visine, morate postaviti visinu

tijelo
i

hTML
elementi kao dobro. Zato biste trebali upotrebljavati CSS da biste postavili visinu ne samo divova, već i tijela i HTML elemenata. To može biti izazov jer možete brzo preopteretiti sve što je postavljeno na 100% visinu, samo da bi se postigao taj željeni učinak.

Neke stvari koje treba primijetiti kada radite s 100% visinama

Sada kad znate postaviti visinu elemenata svoje stranice na 100%, može biti uzbudljivo ići na sve stranice, ali postoji nekoliko stvari o kojima biste trebali biti svjesni:

Margine i padding možete dodati traku za pomicanje na mjestu gdje ga ne želite.Jedna od najpoželjnijih stvari koje sam pronašla s radom s postotnim visinama (i širinama) jest ta da padding i margine na tim istim elementima mogu dodati trake za pomicanje na stranicu, iako se sve prikazuju bez potrebe za pomicanjem trake. To je zato što je visina ili širina elementa prva stvar koja se izračunava. Zatim se dodaju margine i paddings. Dakle, ako imate element s visinom od 100% i gornjim i donjim marginama od po 10 piksela, bit će traka za pomicanje za dodatnih 20 piksela. Imajte na umu da model CSS okvira dodaje marginu, granicu i padding na veličinu elementa, pa će 100% s bilo kojom od tih vrijednosti ostalih modula okvira biti više od 100%.

Ako vaš sadržaj zauzima više od navedene visine, nakon njega će prebrisati sve.Drugim riječima, ako imate dizajn s stupom koji je visoka od 80%, a sadržaj koji je unutar njega zauzima 100% visine, dodatnih 20% će se nastaviti ispod stupca i razbiti vizualni dizajn vaše stranice. Ako se ispod tog stupca nalazi sadržaj, tekst će jednostavno napisati preko vrha. Često vidim da se to događa kada web dizajner nastoji prisiliti visinu stranice i postiže savršeno funkcioniranje za pokretanje, ali kada se sadržaj na toj stranici promijeni u budućnosti, njihove apsolutne visine potpuno razbijaju protok stranice. To je dvostruko istinito kada izrađujete responzivne web stranice čija se širina i visina moraju mijenjati s veličinom prozora.

Da biste to popravili, možete podesiti i visinu elementa. Ako ga postavite

auto,
pojavit će se gumbi za pomicanje ako su potrebni, ali nestati kada to nisu.To popravlja vizualni prekid, ali dodaje scrollbars gdje ih možda ne želite.

Upotreba jedinica za prikaz

Drugi način na koji možete uhvatiti se u koštac s ovim izazovom jest eksperimentirati s CSS Viewport Unitom. Koristeći mjernu jedinicu visine visine prozora možete veličinu elemenata zauzimati određenu visinu prozora i to će se mijenjati dok se promjena okvira mijenja! Ovo je odličan način da dobijete 100% vizualne visine na stranici, ali im ipak budete fleksibilni za različite uređaje i veličine zaslona.