Kako nastaviti višino elementa HTML na 100%

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 a

višina: 100px;

bo v vašem projektu trajalo 100 pikslov navpičnega prostora. Ni važno, kako večje je vaše okno brskalnika, ta element bo 100 slikovnih točk višine.

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 a

višina: 50%;
znotraj diva z višino 100 pik, bo odstavek višine 50 slikovnih pik, kar je 50% njenega nadrejenega 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šina: 100%;
na ta element. Konec koncev, če nastavite

premer
do

širina: 100%;
element bo zajel celoten horizontalni prostor strani, tako da

višina
bi morali delati 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.

premer
Če v dokumentih ne nastavite nobenih vrednosti, bo brskalnik samodejno prešel 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 za element na strani.

višina
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 vrednost.

višina: avto;
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 določiti višino na svojih spletnih straneh na odstotek, morate nastaviti višino vsak nadrejeni element tistega, ki ga želite določiti višino. Z drugimi besedami, če imate stran, kot je ta:

Vsebina tukaj
Verjetno si želiš

div
in odstavek v njem, da ima 100% višino, vendar ta div dejansko ima dva nadrejeni elementi:

in. Da bi določili višino

div
na relativno višino, morate nastaviti višino

telo
in

html
elemente. Torej bi morali uporabiti CSS, da določite višino ne le div, temveč tudi elemente telesa in HTML. 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 od 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 vrsticah. 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 ga nastavite

auto,
drsni trakovi se bodo pojavili, če bodo potrebni, vendar bodo izginili, ko jih ne.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.