Kuidas hoida oma jalus seal, kuhu see kuulub?

See postitus on saadaval ka korea keeles .

Jalus on lehe viimane element. Vähemalt on see vaateava allservas või madalam, kui lehe sisu on vaateakust kõrgem. Lihtne, eks? ?

Jalust sisaldava dünaamilise sisuga töötamisel tekib mõnikord probleem, kus lehe sisust ei piisa selle täitmiseks. Selle asemel, et jääda jalus, selle asemel, et jääda lehe alaossa, kus me seda sooviksime, tõuseb üles ja jätab selle alla tühja ruumi.

Kiire lahenduse saamiseks võite jaluse absoluutselt asetada lehe alaossa. Kuid sellega kaasnevad ka omad varjuküljed. Kui sisu kasvab vaateaknast suuremaks, jääb jalus vaateakna alaossa „kinni”, soovime seda või mitte.

See näitab käitumist, mida me ei soovi ega taha:

Vaatame lähenemist selle saavutamiseks.

Jaluse kontrolli alla saamine

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

Mida see siis teeb?

  • See page-containerümbritseb lehel kõike ja määrab selle minimaalseks kõrguseks 100% vaateava kõrgusest ( vh). Sellisel kujul saab relativeselle alamelemente absolutehiljem selle põhjal määrata .
  • Sellel content-wrapon alumine polster, mis on jaluse kõrgus, tagades, et jaluse jaoks jääks täpselt piisavalt ruumi konteineri sees, milles nad mõlemad asuvad. Siin divkasutatakse ümbrist , mis sisaldaks kogu muud lehe sisu.
  • See footeron seatud absolute, jäädes selle juurde bottom: 0, milles page-containersee on. See on oluline, kuna see pole absolutevaateaknasse suunatud, kuid liigub alla, kui page-containerpilt on vaateaknast kõrgem. Nagu öeldud, 2.5remkasutatakse siin meelevaldselt seatud kõrgust content-wrap.

Ja seal see teil on. Teie jalus jääb nüüd sinna, mida võiksite oodata!

Viimane lihv

Muidugi on see CSS, nii et see ei oleks täielik ilma mõnede mobiilispetsiifiliste UX-i kaalutlusteta ja alternatiivse lähenemisviisiga, mis kasutab min-height: 100%pigem 100vh. Kuid sellel on omad puudused.

Kasutada võib ka Flexboxi (koos painduva kasvuga) või võrku, mis on mõlemad väga võimsad.

Millise meetodi valite, sõltub täielikult teie ja teie kujunduse eripära. Loodetavasti aitavad ülaltoodud näide ja lingid säästa aega otsuse langetamisel ja selle elluviimisel.

Täname lugemast. Siin on veel paar asja, mille olen hiljuti kirjutanud:

  • Algaja juhend Amazoni elastsete konteinerite teenusele
  • Reaktsiooni testimine Jesti ja ensüümiga