Sådan sætter du højden af et HTML-element til 100%

Et almindeligt stillet spørgsmål i website design er "hvordan sætter du højden på et element til 100%"?

Dette kan virke som et let svar. Du bruger simpelthen CSS til at indstille højden af et element til 100%, men det strækker ikke altid elementet, så det passer til hele browservinduet. Lad os finde ud af, hvorfor dette sker, og hvad du kan gøre for at opnå denne visuelle stil.

Pixel og procentdele

Når du definerer højden af et element ved hjælp af CSS-egenskaben og en værdi, der bruger pixels, vil elementet optage så meget vertikalt rum i browseren. For eksempel et afsnit med a

højde: 100px;

vil optage 100 pixel af lodret plads i dit design. Det er ligegyldigt, hvor storere dit browservindue er, dette element vil være 100 pixels i højden.

Procentdelerne fungerer forskelligt fra pixel. Ifølge W3C-specifikationen beregnes procentdel højder i forhold til beholderens højde. Så hvis du lægger et afsnit med a

højde: 50%;
inde i en div med en højde på 100 px, stykket vil være 50 pixels i højden, hvilket er 50% af dets overordnede element.

Hvorfor procentdel højder fejler

Hvis du designer en webside, og du har en kolonne, som du gerne vil opsætte vinduets fulde højde, er den naturlige tilbøjelighed at tilføje en

højde: 100%;
til det element. Når alt kommer til alt, hvis du indstiller

bredde
til

bredde: 100%;
elementet vil tage det fulde vandrette rum på siden, så

højde
skal arbejde det samme, ikke? Desværre er det slet ikke tilfældet.

For at forstå, hvorfor dette sker, skal du forstå, hvordan browsere fortolker højde og bredde. Webbrowsere beregner den samlede tilgængelige bredde som en funktion af, hvor bredt browservinduet åbnes.

bredde
Hvis du ikke angiver værdier på dine dokumenter, flytter browseren automatisk indholdet til at fylde hele bredden af vinduet (100% bredde er standard).

Højdeværdien beregnes forskelligt fra bredden. Faktisk vurderer browsere slet ikke højden, medmindre indholdet er så langt, at det går uden for visningsporten (dermed kræver rullefelter), eller hvis webdesigneren angiver et absolut for et element på siden.

højde
Ellers tillader browseren blot indholdsstrømmen inden for bredden af visningsporten, indtil den kommer til slutningen. Højden beregnes slet ikke.

Problemer opstår, når du indstiller en procentdel højde på et element, der har forældreelementer uden højder indstillet - med andre ord, hovedelementerne har en standard.

højde: auto;
Du beder faktisk browseren om at beregne en højde fra en ikke-defineret værdi. Da det ville svare til en nullværdi, er resultatet at browseren ikke gør noget.

Hvis du vil sætte en højde på dine websider til en procentdel, skal du indstille højden af hver overordnet element i den ønskede højde. Med andre ord, hvis du har en side som denne:

Indhold her
Du vil sandsynligvis have det

div
og stykket i det for at have en 100% højde, men den div har faktisk to overordnede elementer:

og. For at definere højden af

div
til en relativ højde, skal du indstille højden af

legeme
og

html
elementer også. Så du skal bruge CSS til at indstille højden på ikke kun div men også kroppens og HTML-elementerne. Dette kan være en udfordring, da du hurtigt kan blive overvældet med alt, hvad der er sat til 100% højde, kun for at opnå denne ønskede effekt.

Nogle ting at bemærke, når du arbejder med 100% højder

Nu hvor du ved, hvordan du sætter højden på dine sideelementer til 100%, kan det være spændende at gå ud og gøre det til alle dine sider, men der er et par ting du bør være opmærksom på:

Margener og polstring kan tilføje en rullelinje, hvor du ikke vil have en.En af de mest irriterende ting, jeg har fundet med at arbejde med procentdel højder (og bredder) er, at polstring og margener på de samme elementer kan tilføje rullefelter til siden, selv om alt indhold vises uden at have brug for rullebjælker. Dette skyldes, at elementets højde eller bredde er den første, der beregnes. Så tilføjes margenerne og paddingerne på. Så hvis du har et element med en højde på 100% og øverste og nederste margener på 10 pixels hver, vil der være en rullepanel for de ekstra 20 pixels. Husk, at CSS-bokmodellen tilføjer margin, grænse og polstring på størrelsen af et element, så 100% med nogen af de andre boksens modelværdier vil faktisk være mere end 100%.

Hvis dit indhold optager mere end den definerede højde, overskriver den noget efter det.Med andre ord, hvis du har et design med en kolonne, der er 80% i højden, og indholdet der er inde i det vil tage op 100% af højden, vil den ekstra 20% fortsætte under søjlen og bryde det visuelle design af din side. Hvis der er indhold under denne kolonne, vil teksten simpelthen skrive over toppen af den. Jeg ser ofte dette ske, når en webdesigner forsøger at tvinge højden på en side og får det til at fungere perfekt til lancering, men når indholdet på den side ændrer sig i fremtiden, vil deres absolutte højder helt ødelægge strømmen af siden. Dette er dobbelt så sandt, når du bygger lydhøre websites, hvis bredde og højde skal ændres med størrelsen af visningsporten.

For at rette dette kan du også indstille elementets højde. Hvis du sætter det på

auto,
rullebjælker vises, hvis de er nødvendige, men forsvinder, når de ikke er.Det løser den visuelle pause, men det tilføjer scrollbars, hvor du måske ikke vil have dem.

Brug af Viewport Units

En anden måde at løse denne udfordring på er at eksperimentere med CSS Viewport Units. Ved at bruge måleenhedens visningshøjde kan du dimensionere elementer for at tage en defineret højde af visningsporten, og det vil ændre sig, da visningsporten ændres! Dette er en fantastisk måde at få dine 100% højde visuelle på en side, men stadig få dem til at være fleksible til forskellige enheder og skærmstørrelser.