Hvordan holder du din sidefod, hvor den hører hjemme?
Dette indlæg er også tilgængeligt på koreansk .
En sidefod er det sidste element på siden. Det er som minimum i bunden af visningen eller lavere, hvis sideindholdet er højere end visningen. Simpelt, ikke? ?
Når du arbejder med dynamisk indhold, der inkluderer en sidefod, opstår der undertiden et problem, hvor indholdet på en side ikke er nok til at udfylde det. Sidefoden, i stedet for at blive i bunden af siden, hvor vi ønsker, at den skal blive, rejser sig og efterlader et tomt rum under det.
For en hurtig løsning kan du absolut placere sidefoden nederst på siden. Men dette kommer med sin egen ulempe. Hvis indholdet bliver større end visningen, forbliver sidefoden 'fast' i bunden af visningen, uanset om vi vil have det eller ej.
Dette viser den adfærd, vi ikke ønsker og ønsker:

Lad os se på en tilgang til at opnå dette.
At få fodfoden under kontrol
index.html
:
main.css
:
#page-container { position: relative; min-height: 100vh; } #content-wrap { padding-bottom: 2.5rem; /* Footer height */ } #footer { position: absolute; bottom: 0; width: 100%; height: 2.5rem; /* Footer height */ }
Så hvad laver dette?
- Den
page-container
går rundt på alt på siden og indstiller minimumshøjden til 100% af visningshøjden (vh
). Som det errelative
, kan dets underordnede elementer indstilles medabsolute
position baseret på det senere. - Den
content-wrap
har en bundpolstring, der er sidefodens højde, hvilket sikrer, at der er nøjagtigt nok plads til sidefoden inde i containeren, de begge er i. Her anvendes en indpakningdiv
, der indeholder alt andet sideindhold. - Den
footer
er indstillet til atabsolute
holde sig til denbottom: 0
af denpage-container
er indeni. Dette er vigtigt, da det ikke erabsolute
til visningen, men vil bevæge sig ned, hvis detpage-container
er højere end visningen. Som nævnt bruges dens højde, vilkårligt indstillet til2.5rem
her, icontent-wrap
ovenstående.
Og der har du det. Din sidefod forbliver nu, hvor du ville forvente!
Sidste hånd
Selvfølgelig er dette CSS, så det ville ikke være komplet uden nogle mobilspecifikke UX-overvejelser og en alternativ tilgang, der bruger min-height: 100%
snarere end 100vh
. Men dette har sine egne ulemper.
Flexbox (med flex-grow) eller Grid kan også bruges, og de er begge meget kraftfulde.
Hvilken metode du vælger er helt op til dig og specifikationerne for dit design. Forhåbentlig hjælper ovenstående eksempel og links dig med at spare tid på at tage din beslutning og implementere den.
Tak for læsningen. Her er et par andre ting, jeg har skrevet for nylig:
- En begyndervejledning til Amazons Elastic Container Service
- Testning Reager med nar og enzym