Slik setter du høyden på et HTML-element til 100%

Et vanlig spørsmål i webdesign er "hvordan setter du høyden på et element til 100%"?

Dette kan virke som et enkelt svar. Du bruker bare CSS til å sette høyden på et element til 100%, men dette strekker ikke alltid elementet slik at det passer hele nettleservinduet. La oss finne ut hvorfor dette skjer og hva du kan gjøre for å oppnå denne visuelle stilen.

Piksler og prosenter

Når du definerer høyden på et element ved hjelp av CSS-egenskapen og en verdi som bruker piksler, vil elementet ta opp så mye vertikal plass i nettleseren. For eksempel, et avsnitt med a

høyde: 100px;

vil ta opp 100 piksler med vertikal plass i designet. Det spiller ingen rolle hvor større ditt nettleservindu er, dette elementet vil være 100 piksler i høyden.

Prosentene fungerer annerledes enn piksler. I henhold til W3C-spesifikasjonen beregnes prosenthøyder i forhold til beholderens høyde. Så hvis du legger et avsnitt med a

høyde: 50%;
innenfor en div med en høyde på 100 px, vil avsnittet være 50 piksler i høyden, som er 50% av dets overordnede element.

Hvorfor prosentandel høyder mislykkes

Hvis du designer en nettside, og du har en kolonne som du vil ta opp hele høyden på vinduet, er den naturlige tilbøyeligheten å legge til en

høyde: 100%;
til det elementet. Tross alt, hvis du setter

bredde
til

bredde: 100%;
elementet vil ta opp hele horisontal plass på siden, så

høyde
skal fungere det samme, ikke sant? Dessverre er dette ikke tilfelle i det hele tatt.

For å forstå hvorfor dette skjer, må du forstå hvordan nettlesere tolker høyde og bredde. Nettlesere beregner total tilgjengelig bredde som en funksjon av hvor bredt nettleservinduet åpnes.

bredde
Hvis du ikke angir noen verdier på dokumentene dine, vil nettleseren automatisk flyte innholdet for å fylle hele bredden av vinduet (100% bredde er standard).

Høydeverdien beregnes annerledes enn bredden. Faktisk vurderer nettlesere ikke høyden med mindre innholdet er så langt at det går utenfor visningsporten (dermed krever rullestenger) eller hvis nettdesigneren setter en absolutt for et element på siden.

høyde
Ellers lar nettleseren innholdsstrømmen innenfor bredden av visningsporten til den kommer til slutten. Høyden beregnes ikke i det hele tatt.

Problemer oppstår når du angir en prosenthøyde på et element som har foreldreelementer uten høyder - det vil si at hovedelementene har en standard.

høyde: auto;
Du ber i realiteten at nettleseren skal beregne en høyde fra en udefinert verdi. Siden det ville være en nullverdi, er resultatet at nettleseren ikke gjør noe.

Hvis du vil sette en høyde på websidene dine til en prosentandel, må du sette høyden på hver Foreldreelementet til den du ønsker definert høyde. Med andre ord, hvis du har en side som dette:

Innhold her
Du vil sannsynligvis ha det

div
og avsnittet i det å ha en 100% høyde, men det div faktisk har to foreldreelementer:

og. For å definere høyden på

div
Til en relativ høyde, må du sette høyden på

kropp
og

html
elementer også. Så du må bruke CSS til å angi høyden på ikke bare div, men også kropps- og HTML-elementene. Dette kan være en utfordring, siden du raskt kan bli overveldet med alt satt til 100% høyde, bare for å oppnå denne ønskede effekten.

Noen ting å merke seg når du arbeider med 100% høyder

Nå som du vet hvordan du setter høyden på sidelementene dine til 100%, kan det være spennende å gå ut og gjøre det på alle sidene dine, men det er noen ting du bør være oppmerksom på:

Marginer og polstring kan legge til en rullefelt hvor du ikke vil ha en.En av de mest irriterende tingene jeg har funnet med å arbeide med prosenthøyder (og bredder) er at da polstring og marginer på de samme elementene kan legge til rullefelt på siden, selv om alt innholdet vises uten behov for rullefelt. Dette skyldes at elementets høyde eller bredde er den første som beregnes. Deretter legges kantene og paddingene på. Så hvis du har et element med en høyde på 100% og topp og bunn marginer på 10 piksler hver, vil det være en rullefelt for de ekstra 20 piksler. Husk at CSS-boksemodellen legger til margin, kantlinje og polstring på størrelsen på et element, så 100% med noen av de andre boksens modellverdier vil faktisk være over 100%.

Hvis innholdet ditt tar opp mer enn den definerte høyden, vil den overskrive noe etter det.Med andre ord, hvis du har et design med en kolonne som er 80% i høyden, og innholdet som er inne i det, vil ta opp 100% av høyden, vil den ekstra 20% fortsette under kolonnen og bryte den visuelle designen av siden din. Hvis det er innhold under den kolonnen, vil teksten bare skrive over toppen av den. Jeg ser ofte dette skje når en webdesigner forsøker å tvinge høyden på en side og får den til å fungere perfekt for lanseringen, men når innholdet på siden endrer seg i fremtiden, vil deres absolutte høyder helt ødelegge strømmen av siden. Dette er dobbelt så sant når du bygger responsive nettsteder hvis bredde og høyde må endres med størrelsen på visningsporten.

For å fikse dette, kan du også angi høyden på elementet. Hvis du setter den til

auto,
rullestenger vises hvis de trengs, men forsvinner når de ikke er.Det løser den visuelle pause, men det legger til rullestenger der du kanskje ikke vil ha dem.

Bruke Viewport Units

En annen måte du kan takle denne utfordringen på er å eksperimentere med CSS Viewport Units. Ved å bruke visningsporthøyde måleenhet, kan du formatere elementer for å ta opp en definert høyde på visningsporten, og det vil endres ettersom visningsporten endres! Dette er en fin måte å få 100% høydevisuelle bilder på en side, men de er fortsatt fleksible for forskjellige enheter og skjermstørrelser.