Hvordan holder du bunnteksten der den hører hjemme?

Dette innlegget er også tilgjengelig på koreansk .

Bunntekst er det siste elementet på siden. Som et minimum er det nederst i visningsområdet, eller lavere hvis sideinnholdet er høyere enn visningsområdet. Enkelt, ikke sant? ?

Når du arbeider med dynamisk innhold som inkluderer en bunntekst, oppstår det noen ganger et problem der innholdet på en side ikke er nok til å fylle det. Bunnteksten, i stedet for å holde seg nederst på siden der vi ønsker at den skal bli, stiger opp og etterlater et tomt rom under den.

For en rask løsning kan du plassere bunnteksten helt nederst på siden. Men dette kommer med sin egen ulempe. Hvis innholdet blir større enn visningsområdet, vil bunnteksten forbli 'fast' til bunnen av visningsporten, enten vi vil ha det eller ikke.

Dette viser atferden vi ikke gjør og ønsker:

La oss se på en tilnærming for å oppnå dette.

Få kontroll over bunnteksten

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å hva gjør dette?

  • Det page-containergår rundt alt på siden, og setter minimumshøyden til 100% av visningshøyden ( vh). Som det er relative, kan de underordnede elementene settes med absoluteposisjon basert på det senere.
  • Den content-wraphar en bunnpolstring som er høyden på bunnteksten, og sørger for at det er nøyaktig nok plass til bunnteksten inne i beholderen de er i. Her brukes en innpakning divsom inneholder alt annet sideinnhold.
  • Det footerer satt til absolute, holder seg til bottom: 0det page-containerdet er innenfor. Dette er viktig, siden det ikke er absolutetil visningsområdet, men vil bevege seg ned hvis det page-containerer høyere enn visningsområdet. Som nevnt brukes høyden, vilkårlig satt til 2.5remher, i den content-wrapovenfor.

Og der har du det. Bunnteksten blir nå der du forventer!

Siste grep

Selvfølgelig er dette CSS, så det ville ikke være komplett uten noen mobilspesifikke UX-hensyn, og en alternativ tilnærming som bruker i min-height: 100%stedet for 100vh. Men dette har sine egne ulemper.

Flexbox (med flex-grow) eller Grid kan også brukes, og er begge veldig kraftige.

Hvilken metode du velger er helt opp til deg, og detaljene i designet ditt. Forhåpentligvis hjelper ovenstående eksempel og lenker deg med å spare litt tid på å ta din beslutning og implementere den.

Takk for at du leste. Her er et par andre ting jeg har skrevet nylig:

  • En nybegynnerveiledning til Amazons Elastic Container Service
  • Testing Reager med spøk og enzym