Kā saglabāt kājeni tur, kur tā pieder?

Šis ieraksts ir pieejams arī korejiešu valodā .

Kājene ir pēdējais lapas elements. Vismaz tas atrodas skata apakšdaļā vai zemāk, ja lapas saturs ir garāks par skatu. Vienkārši, vai ne? ?

Strādājot ar dinamisku saturu, kas ietver kājeni, dažreiz rodas problēma, kad lapas saturs nav pietiekams, lai to aizpildītu. Kājene, nevis paliek lapas apakšā, kur mēs vēlētos, lai tā paliek, paceļas uz augšu un atstāj zem tās tukšu vietu.

Lai ātri labotu, kājeni varat absolūti novietot lapas apakšdaļā. Bet tam ir savs mīnuss. Ja saturs kļūst lielāks par skata punktu, kājene paliks “iestrēdzis” skata apakšā neatkarīgi no tā, vai mēs to vēlamies.

Tas parāda uzvedību, kuras mēs nevēlamies un vēlamies:

Apskatīsim pieeju, kā to panākt.

Kājenes kontrolēšana

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

Ko tad tas dara?

  • page-containerIet apkārt visam lapā, un nosaka tā minimālo augstumu līdz 100% no viewport augstuma ( vh). Tā kā tas ir relative, tā pakārtotos elementus absolutevēlāk var iestatīt ar pozīciju, pamatojoties uz to.
  • Tam content-wrapir apakšējais polsterējums, kas ir kājenes augstums, nodrošinot, ka kājenei tiek atstāts pietiekami daudz vietas konteinera iekšpusē, kurā viņi abi atrodas. Šeit divtiek izmantots iesaiņojums, kurā būtu viss pārējais lapas saturs.
  • Ir footeriestatīts uz absolute, pieturoties pie tā bottom: 0, kurā page-containertas atrodas. Tas ir svarīgi, jo tas nav absoluteuz skatu, bet virzīsies uz leju, ja tas page-containerir garāks par skatu. Kā minēts, tā augstums, kas patvaļīgi iestatīts 2.5remšeit, tiek izmantots content-wrapiepriekš minētajā.

Un tur jums tas ir. Jūsu kājene tagad paliek tur, kur jūs varētu gaidīt!

Pēdējie pieskārieni

Protams, tas ir CSS, tāpēc tas nebūtu pilnīgs bez dažiem mobilajām ierīcēm paredzētiem UX apsvērumiem un alternatīvas pieejas, izmantojot min-height: 100%nevis 100vh. Bet tam ir savi trūkumi.

Var izmantot arī Flexbox (ar flex-grow) vai Grid, un abi ir ļoti jaudīgi.

Kura izvēlētā metode ir pilnībā atkarīga no jums un jūsu dizaina specifikas. Cerams, ka iepriekš minētais piemērs un saites palīdzēs ietaupīt laiku, pieņemot lēmumu un to īstenojot.

Paldies, ka lasījāt. Šeit ir pāris citas lietas, ko esmu nesen uzrakstījis:

  • Iesācēja ceļvedis Amazon Elastic Container Service
  • Testa reakcija ar Jestu un Enzīmu