Hur ställer man höjden för ett HTML-element till 100%

En vanlig fråga i webbdesign är "hur ställer du höjden på ett element till 100%"?

Det kan tyckas som ett enkelt svar. Du använder helt enkelt CSS för att ställa in höjden på ett element till 100%, men det sträcker inte alltid elementet så att det passar hela webbläsarfönstret. Låt oss ta reda på varför detta händer och vad du kan göra för att uppnå denna visuella stil.

Pixlar och procentandelar

När du definierar höjden på ett element med hjälp av CSS-egenskapen och ett värde som använder pixlar, kommer det här elementet att ta upp så mycket vertikalt utrymme i webbläsaren. Till exempel en paragraf med a

höjd: 100px;

kommer att ta upp 100 pixlar av vertikalt utrymme i din design. Det spelar ingen roll hur större ditt webbläsarfönster är, det här elementet kommer att vara 100 pixlar i höjd.

Procentandelar fungerar annorlunda än pixlar. Enligt W3C-specifikationen beräknas procentuella höjder med hänsyn till behållarens höjd. Så om du lägger ett stycke med a

höjd: 50%;
Inne i en div med en höjd av 100 px kommer stycket att vara 50 pixlar i höjd, vilket är 50% av dess moderelement.

Varför procentuella höjder misslyckas

Om du designar en webbsida, och du har en kolumn som du vill ta upp hela fönstret, är den naturliga lutningen att lägga till en

höjd: 100%;
till det elementet. När allt kommer omkring, om du ställer in

bredd
till

bredd: 100%;
elementet tar upp hela sidans horisontella utrymme, så

höjd
ska fungera samma, eller hur? Tyvärr är detta inte alls fallet.

För att förstå varför detta händer måste du förstå hur webbläsare tolkar höjd och bredd. Webbläsare beräknar den totala tillgängliga bredden som en funktion av hur stor webbläsarfönstret öppnas.

bredd
Om du inte anger några värden på dina dokument, flyter webbläsaren automatiskt innehållet för att fylla hela bredden på fönstret (100% bredd är standard).

Höjdvärdet beräknas annorlunda än bredden. I själva verket utvärderar webbläsare inte höjd alls om innehållet är så långt att det går utanför visningsporten (vilket kräver rullningslister) eller om webbdesignern ställer ett absolut för ett element på sidan.

höjd
Annars låter webbläsaren helt enkelt flödet av innehållet i visningsportens bredd tills det kommer till slutet. Höjden beräknas inte alls.

Problem uppstår när du anger en procentuell höjd på ett element som har föräldraelement utan höjder - det vill säga att moderelementen har en standard.

höjd: auto;
Du frågar faktiskt webbläsaren för att beräkna en höjd från ett odefinierat värde. Eftersom det skulle motsvara ett nollvärde, är resultatet att webbläsaren inte gör någonting.

Om du vill ställa in en höjd på dina webbsidor till en procentandel, måste du ställa in höjden på varje föräldraelementet i den du vill definiera höjden. Med andra ord, om du har en sida så här:

Innehåll här
Du vill sannolikt

div
och stycket i det att ha en 100% höjd, men den div har faktiskt två föräldraelement:

och. För att definiera höjden på

div
till en relativ höjd, måste du ställa in höjden på

kropp
och

html
element också. Så du skulle behöva använda CSS för att ställa in höjden av inte bara div men också kropp och HTML-element. Detta kan vara en utmaning, eftersom du snabbt kan bli överväldigad med allt som ställs till 100% höjd, bara för att uppnå denna önskade effekt.

Några saker att notera när du arbetar med 100% höjder

Nu när du vet hur du ställer höjden på dina sidelement till 100%, kan det vara spännande att gå ut och göra det på alla dina sidor, men det finns några saker du bör vara medveten om:

Marginaler och vadderingar kan lägga till en rullningsfält där du inte vill ha en.En av de mest irriterande saker jag har hittat med att arbeta med procentuella höjder (och bredder) är att då kan polstret och marginalerna på samma element lägga till rullningsfält på sidan, trots att allt innehåll visas utan att behöva rullningsfält. Detta beror på att elementets höjd eller bredd är den första som beräknas. Sedan läggs margen och paddlarna på. Så om du har ett element med en höjd på 100% och topp och bottenmarginaler med 10 pixlar vardera kommer det att finnas en rullningsfält för de extra 20 pixlarna. Kom ihåg att CSS-boxmodellen lägger till margin, kant och vaddering på storleken på ett element, så 100% med någon av de andra boxmodellvärdena kommer faktiskt att vara mer än 100%.

Om ditt innehåll tar upp mer än den definierade höjden kommer den att skriva över allt efter det.Med andra ord, om du har en design med en kolumn som är 80% i höjd och innehållet som är inne i det tar upp 100% av höjden, kommer den extra 20% fortsätt under kolumnen och bryter den visuella designen av din sida. Om det finns innehåll under den här kolumnen skriver texten helt enkelt över toppen av den. Jag ser ofta detta hända när en webbdesigner försöker tvinga höjden på en sida och får den att fungera perfekt för lansering, men när innehållet på den sidan ändras i framtiden, bryter deras absoluta höjder helt flödet av sidan. Detta är dubbelt sant när du bygger lyhörda webbplatser vars bredd och höjd måste ändras med storleken på visningsporten.

För att fixa det här kan du också ställa in elementets höjd. Om du ställer in den till

bil,
rullbalkar visas om de behövs men försvinner när de inte är.Det fixar visuell paus, men det lägger till rullbalkar där du kanske inte vill ha dem.

Använda Viewport Units

Ett annat sätt att hantera denna utmaning är att experimentera med CSS Viewport Units. Genom att använda mätvärdet för visningshöjdshöjd kan du dimensionera element för att ta upp en definierad höjd på visningsporten, och det ändras när visningsporten ändras! Detta är ett utmärkt sätt att få dina 100% höjdbilder på en sida, men det är fortfarande flexibelt för olika enheter och skärmstorlekar.