Pogosto zastavljeno vprašanje pri oblikovanju spletnega mesta je "kako nastavite višino elementa na 100%"?
To se morda zdi enostaven odgovor. Elemente CSS preprosto uporabite za nastavitev višine elementa na 100%, vendar to vedno ne raztegne elementa, da bi ustrezal celotnemu oknu brskalnika. Ugotovimo, zakaj se to zgodi in kaj lahko storite, da bi dosegli ta vizualni slog.
Piksli in odstotki
Ko določite višino elementa s pomočjo lastnosti CSS in vrednost, ki uporablja slikovne pike, bo ta element zajel toliko navpičnega prostora v brskalniku.
Na primer, odstavek z višino: 100px; bo v vaši zasnovi zajel 100 slikovnih pik navpičnega prostora. Ni važno, kolikšen je večji okno brskalnika, bo ta element v višini 100 slikovnih pik.
Odstotki delujejo drugače kot pik. V skladu s specifikacijo W3C se višine odstotka izračunajo glede na višino posode. Torej, če postavite odstavek z višino: 50%; znotraj diva z višino 100 pik, bo odstavek višine 50 pik, kar je 50% njenega starševskega elementa.
Zakaj odstotka heights ni uspelo
Če oblikujete spletno stran in imate stolpec, ki bi ga radi vzeli na višino okna, je naravni nagib dodati višino: 100%; na ta element. Konec koncev, če nastavite širino na širino: 100%; element bo zajel celoten horizontalni prostor strani, zato bi morala višina delovati enako, kajne? Na žalost to sploh ni.
Da bi razumeli, zakaj se to zgodi, morate razumeti, kako brskalniki razlagajo višino in širino. Spletni brskalniki izračunajo skupno razpoložljivo širino kot funkcijo, kako široko je odprto okno brskalnika. Če v dokumentih ne nastavite nobenih širinskih vrednosti, bo brskalnik samodejno pretakal vsebino, da bo zapolnil celotno širino okna (privzeta je 100-odstotna širina).
Višinska vrednost se izračuna različno od širine. Dejstvo je, da brskalniki sploh ne ocenjujejo višine, če vsebina ni tako dolgo, da gre zunaj vidnega polja (zaradi česar so potrebne drsne palice) ali če spletni oblikovalec določi absolutno višino za element na strani. V nasprotnem primeru brskalnik preprosto omogoča pretok vsebine znotraj širine pogleda, dokler ne pride do konca. Višina se sploh ne izračuna.
Težave se pojavijo, ko nastavite višino odstotka na elementu, ki ima starševske elemente brez nastavljene višine - z drugimi besedami, matični elementi imajo privzeto višino: auto; . V bistvu prosite brskalnik, da izračuna višino iz nedefinirane vrednosti. Ker bi to pomenilo ničelno vrednost, je rezultat, da brskalnik ne naredi ničesar.
Če želite na svojih spletnih straneh nastaviti višino, morate določiti višino vsakega starševskega elementa tistega, ki ga želite določiti višino. Z drugimi besedami, če imate stran, kot je ta:
Vsebina tukaj
Verjetno želite, da ima div in odstavek v njej 100-odstotno višino, vendar ta div dejansko ima dva nadrejena elementa:
in. Da bi določili višino div na relativno višino, morate določiti tudi višino telesa in html elementov.
Torej bi morali uporabiti CSS, da določite višino ne le div, temveč tudi telo in html elemente. To je lahko izziv, saj lahko hitro prebolite vse, kar je nastavljeno na 100-odstotno višino, le da dosežete ta želeni učinek.
Nekatere stvari, ki jih je treba upoštevati pri delu s 100% višinami
Zdaj, ko veste, kako nastaviti višino elementov strani na 100%, je lahko vznemirljivo, da gredo ven in to storite na vseh vaših straneh, vendar je nekaj stvari, ki bi jih morali poznati:
- Margine in oblazinjenje lahko dodajo drsni trak, kjer ga ne želite. Ena najbolj nadležnih stvari, ki sem jih našel pri delu z višinami (in širinami), je, da lahko obloge in robovi na istem elementu doda strani za pomikanje na stran, čeprav se vsa vsebina prikaže brez potrebe po drsnih trakovih. To je zato, ker je višina ali širina elementa prva stvar, ki se izračuna. Nato se doda robove in pomesti. Torej, če imate element z višino 100% in zgornjim in spodnjim robom po 10 slikovnih pik, se bo drsna vrstica povečala za dodatnih 20 slikovnih pik. Ne pozabite, da model polja CSS doda rob, rob in oblazinjenje na velikost elementa, tako da bo 100% s katero koli od teh vrednosti drugih modelov škatle dejansko več kot 100%.
- Če vaša vsebina prevzame več kot določena višina, bo za njim napisala ničesar. Z drugimi besedami, če imate dizajn s stolpcem, ki je višina 80%, in vsebina, ki je znotraj nje, bo trajala 100% višine, se bo dodatnih 20% nadaljevalo pod stolpcem in prekinilo vizualno zasnovo vaše strani. Če je vsebina pod tem stolpcem, bo besedilo preprosto napisalo na vrhu. Pogosto vidim, da se to zgodi, ko spletni oblikovalec poskuša prisiliti višino strani in jo odlično deluje za zagon, toda ko se vsebina na tej strani spremeni v prihodnosti, njihova absolutna višina popolnoma zlomi tok strani. To je dvakrat res, ko gradite odzivne spletne strani, katerih širina in višina se morata spremeniti z velikostjo pogleda.
Če želite to popraviti, lahko nastavite tudi višino elementa. Če ste ga nastavili na samodejno, se bodo vrstice za pomikanje prikazale, če so potrebne, a bodo izginile, ko niso. S tem je odpravljen vizualni odmor, vendar dodaja drsnike, kjer jih morda ne želite.
Uporaba Viewport enot
Drug način, s katerim lahko rešite ta izziv, je preizkus z enotami za prikazovanje CSS. Z uporabo merilne enote višine pogleda lahko elemente velikosti zajemate določeno višino pogleda, kar se bo spremenilo, ko se spremeni pogled! To je odličen način za prikaz 100-odstotne vizualne višine na strani, vendar jih je še vedno treba prilagoditi za različne naprave in velikosti zaslona.