Come mantenere il tuo piè di pagina a cui appartiene?

Questo post è disponibile anche in coreano .

Un piè di pagina è l'ultimo elemento della pagina. Almeno si trova nella parte inferiore della visualizzazione o inferiore se il contenuto della pagina è più alto della visualizzazione. Semplice, vero? ?

Quando si lavora con contenuto dinamico che include un piè di pagina, a volte si verifica un problema in cui il contenuto di una pagina non è sufficiente per riempirlo. Il piè di pagina, invece di rimanere in fondo alla pagina dove vorremmo che rimanga, si alza e lascia uno spazio vuoto sotto di esso.

Per una soluzione rapida, puoi assolutamente posizionare il piè di pagina nella parte inferiore della pagina. Ma questo ha il suo svantaggio. Se il contenuto diventa più grande della visualizzazione, il piè di pagina rimarrà "bloccato" nella parte inferiore della visualizzazione, che lo vogliamo o meno.

Questo mostra il comportamento che non vogliamo e che vogliamo:

Diamo un'occhiata a un approccio per raggiungere questo obiettivo.

Tenere sotto controllo il tuo piè di pagina

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 */ }

Allora cosa sta facendo?

  • Il page-containerva in giro tutto sulla pagina, e imposta l'altezza minima per il 100% dell'altezza finestra ( vh). Così com'è relative, i suoi elementi figlio possono essere impostati con la absoluteposizione basata su di essa in un secondo momento.
  • L' content-wrapha un'imbottitura di fondo che è l'altezza del piè di pagina, assicurando che esattamente sufficiente spazio è lasciato per il piè di pagina all'interno del contenitore sono entrambi dentro. Un involucro divqui è usato che dovrebbe contenere tutti gli altri contenuti pagina.
  • Il footerè impostato su absolute, attenendosi al bottom: 0di page-containeresso è all'interno. Questo è importante, poiché non è absoluteper il viewport, ma si sposta verso il basso se page-containerè più alto del viewport. Come affermato, la sua altezza, impostata arbitrariamente su 2.5remqui, viene utilizzata nella parte content-wrapsuperiore.

E il gioco è fatto. Il tuo piè di pagina ora rimane dove ti aspetteresti!

Tocchi finali

Naturalmente, questo è CSS, quindi non sarebbe completo senza alcune considerazioni sull'esperienza utente specifiche per dispositivi mobili e un approccio alternativo che utilizza min-height: 100%piuttosto che 100vh. Ma questo ha i suoi svantaggi.

Possono essere utilizzati anche Flexbox (con flex-grow) o Grid, entrambi molto potenti.

Il metodo che scegli dipende interamente da te e dalle specifiche del tuo design. Si spera che l'esempio e i collegamenti sopra riportati ti aiutino a risparmiare tempo nel prendere la tua decisione e nell'implementarla.

Grazie per aver letto. Ecco un paio di altre cose che ho scritto di recente:

  • Una guida per principianti al servizio di contenitori elastici di Amazon
  • Test di reazione con Jest ed Enzyme