Kako zadržati podnožje tamo gdje mu je mjesto?

Programiranje

Ovaj je post dostupan i na korejskom jeziku .

Podnožje je zadnji element na stranici. Najmanje je na dnu okvira za prikaz ili niže ako je sadržaj stranice viši od okvira za prikaz. Jednostavno, zar ne? ?

Pri radu s dinamičkim sadržajem koji uključuje podnožje, ponekad se dogodi problem kada sadržaj na stranici nije dovoljan da ga popuni. Podnožje, umjesto da ostane na dnu stranice na mjestu na kojem bismo željeli da ostane, podiže se i ostavlja prazan prostor ispod sebe.

Za brzo rješenje možete podnožje apsolutno postaviti na dno stranice. Ali ovo dolazi sa svojom lošom stranom. Ako sadržaj postane veći od okvira prikaza, podnožje će ostati 'zaglavljeno' na dnu okvira prikaza, htjeli mi to ili ne.

To pokazuje ponašanje koje ne želimo i koje želimo:

Pogledajmo pristup kako bismo to postigli.

Dobivanje podnožja pod kontrolu

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

Pa što to radi?

  • page-containerObilazi sve na stranici, i postavlja svoje minimalne visine do 100% visine viewport ( vh). Takvi kakvi jesu relative, njegovi se podređeni elementi mogu absolutekasnije postaviti s položajem koji se temelji na njemu.
  • content-wrapIma dno padding koji je visina podnožja, osiguravajući da je dovoljno točno mjesta još ima za podnožje unutar spremnika su oboje u. Omatanje divovdje se koristi da bi sadržavati sve ostale sadržaj stranice.
  • Postavljeno footerje na absolute, držeći se bottom: 0onog page-containeršto je unutar. To je važno, jer nije absolutedo okvira za prikaz, ali će se pomaknuti prema dolje ako page-containerje viši od okvira za prikaz. Kao što je rečeno, u njemu se koristi njegova visina, proizvoljno postavljena 2.5removdje content-wrap.

Eto ti ga. Vaše podnožje sada ostaje tamo gdje biste očekivali!

Posljednji dodir

Naravno, ovo je CSS, pa ne bi bio potpun bez nekih UX razmatranja koja se odnose na mobilne uređaje i alternativnog pristupa koji se koristi min-height: 100%umjesto 100vh. Ali ovo ima svoje nedostatke.

Flexbox (s flex-grow) ili Grid također se mogu koristiti, a oboje su vrlo moćni.

Koju ćete metodu odabrati ovisi o vama i specifičnostima vašeg dizajna. Nadamo se da vam gornji primjer i poveznice pomažu uštedjeti vrijeme u donošenju odluke i njezinoj primjeni.

Hvala na čitanju. Evo nekoliko drugih stvari koje sam nedavno napisao:

  • Vodič za početnike za Amazonovu uslugu elastičnih kontejnera
  • Testiranje reakcije s Jest i enzimom