Ako udržať pätu tam, kam patrí?

Tento príspevok je k dispozícii aj v kórejčine .

Päta je posledný prvok na stránke. Minimálne je v dolnej časti výrezu, alebo nižšie, ak je obsah stránky vyšší ako výrez. Jednoduché, však? ?

Pri práci s dynamickým obsahom, ktorý obsahuje pätu, sa niekedy vyskytne problém, keď obsah na stránke nestačí na jej vyplnenie. Päta, namiesto toho, aby zostala v dolnej časti stránky, kde by sme chceli, aby zostala, sa zdvihne a nechá pod sebou prázdne miesto.

Pre rýchlu opravu môžete úplne umiestniť pätu v dolnej časti stránky. Toto však má svoju vlastnú nevýhodu. Ak bude obsah väčší ako výrez, päta zostane „prilepená“ na spodnej časti výrezu, či už to chceme alebo nie.

To ukazuje správanie, ktoré nechceme a nechceme:

Pozrime sa na prístup, ako to dosiahnuť.

Dostať pätu 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 */ }

Čo to robí?

  • page-containerObchádza všetko na stránke, a stanovuje jej minimálnu výšku 100% výšky výrezu ( vh). Ako to je relative, jeho podriadené prvky možno nastaviť pomocou absolutepozície založená na tom neskôr.
  • content-wrapMá spodnú vypchávky, ktoré je výška zápätie a zabezpečiť, aby dostatok presne priestor je ponechaný na pätičke vnútri kontajnera sú obe dovnútra. Obalu divje tu použitý, ktorý by obsahoval všetky ďalšie obsah stránky.
  • footerJe nastavená na hodnotu absolute, lepenie do bottom: 0toho page-container, že je vo vnútri. To je dôležité, pretože to nie je absolutek výrezu, ale posunie sa nadol, ak page-containerje vyšší ako výrez. Ako už bolo uvedené, jeho výška, ktorá je 2.5remtu ľubovoľne nastavená , sa používa v content-wraphornej časti stránky.

A tu to máte. Päta teraz zostáva tam, kde by ste čakali!

Posledné úpravy

Toto je samozrejme CSS, takže by to nebolo úplné bez úvah o UX špecifických pre mobilné zariadenia a alternatívneho prístupu, ktorý by používal min-height: 100%skôr než 100vh. Má to však svoje nevýhody.

Možno tiež použiť Flexbox (s flexibilným rastom) alebo Grid, ktoré sú veľmi výkonné.

Ktorý spôsob si vyberiete, je výlučne na vás a na konkrétnych detailoch vášho návrhu. Dúfajme, že vyššie uvedený príklad a odkazy vám pomôžu ušetriť čas pri rozhodovaní a implementácii.

Vďaka za prečítanie. Tu je niekoľko ďalších vecí, ktoré som nedávno napísal:

  • Sprievodca pre začiatočníkov k službe Elastic Container Service spoločnosti Amazon
  • Testovanie Reagujte s Jest a enzýmom