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-containergår rundt på alt på siden og indstiller minimumshøjden til 100% af visningshøjden ( vh). Som det er relative, kan dets underordnede elementer indstilles med absoluteposition baseret på det senere.
  • Den content-wraphar 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 indpakning div, der indeholder alt andet sideindhold.
  • Den footerer indstillet til at absoluteholde sig til den bottom: 0af den page-containerer indeni. Dette er vigtigt, da det ikke er absolutetil visningen, men vil bevæge sig ned, hvis det page-containerer højere end visningen. Som nævnt bruges dens højde, vilkårligt indstillet til 2.5remher, i content-wrapovenstå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