Kako ohraniti nogo tam, kamor spada?

Ta objava je na voljo tudi v korejščini .

Noga je zadnji element na strani. Najmanj je na dnu vidnega polja ali nižje, če je vsebina strani višja od vidnega polja. Preprosto, kajne? ?

Pri delu z dinamično vsebino, ki vključuje nogo, se včasih pojavi težava, ko vsebina na strani ni dovolj, da jo zapolni. Noga, namesto da bi ostala na dnu strani, kjer bi želeli, da ostane, se dvigne in pusti prazen prostor pod njo.

Za hitro rešitev lahko nogo popolnoma namestite na dno strani. A to ima svojo slabo stran. Če vsebina naraste večja od vidnega polja, bo noga ostala "zataknjena" na dnu vidnega polja, ne glede na to, ali si to želimo ali ne.

To prikazuje vedenje, ki si ga ne želimo in si ga želimo:

Poglejmo pristop, kako to doseči.

Dajanje noge pod nadzor

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

Kaj torej počne to?

  • page-containerGre okoli vse na strani, in določa njegovo minimalno višino do 100% višine Vidno območje ( vh). Takšne relativepodrejene elemente lahko pozneje nastavimo s absolutepoložajem, ki temelji na njem.
  • content-wrapIma talno oblogo, da je višina nogi, ki zagotavlja, da je dovolj natančno več prostora za noge v posodi sta oba v. A zavijanje divtukaj se uporablja, da bi vseboval vse druge vsebine strani.
  • Nastavitev footerje nastavljena tako absolute, da se drži bottom: 0tistega, page-containerkar je znotraj. To je pomembno, saj ni absolutedo vidnega polja, vendar se bo premaknilo navzdol, če page-containerje višje od vidnega polja. Kot rečeno, 2.5remje v content-wrapzgornjem uporabljena njegova višina, ki je poljubno nastavljena tukaj .

In tam imate. Noga ostaja tam, kjer bi pričakovali!

Zadnji zaključki

Seveda je to CSS, zato ne bi bil popoln brez nekaterih premislekov o UX za mobilne naprave in nadomestnega pristopa, ki bi min-height: 100%raje kot 100vh. A to ima svoje pomanjkljivosti.

Uporabite lahko tudi Flexbox (s flex-grow) ali Grid, ki sta zelo zmogljiva.

Katero metodo boste izbrali, je povsem odvisno od vas in posebnosti vašega oblikovanja. Upamo, da vam zgornji primer in povezave pomagajo prihraniti nekaj časa pri odločanju in njegovi izvedbi.

Hvala za branje. Tu je nekaj drugih stvari, ki sem jih nedavno napisal:

  • Začetniški vodnik po Amazonovi storitvi Elastic Container Service
  • Testiranje reakcije z Jest in encimom