Kaip išlaikyti poraštę ten, kur ji priklauso?

Šis įrašas taip pat yra korėjiečių kalba .

Poraštė yra paskutinis puslapio elementas. Mažiausiai jis yra peržiūros srities apačioje arba žemiau, jei puslapio turinys yra aukštesnis nei peržiūros srities. Paprasta, tiesa? ?

Dirbant su dinaminiu turiniu, kuriame yra poraštė, kartais iškyla problema, kai puslapio turinio nepakanka jam užpildyti. Poraštė, užuot likusi puslapio apačioje, kur norėtume, kad ji liktų, kyla aukštyn ir palieka tuščią vietą po ja.

Norėdami greitai išspręsti, poraštę galite absoliučiai pastatyti puslapio apačioje. Bet tai turi savo trūkumų. Jei turinys išaugs didesnis nei peržiūros sritis, poraštė liks „įstrigusi“ peržiūros srities apačioje, norime mes to ar ne.

Tai rodo elgesį, kurio mes nenorime ir norime:

Pažvelkime į tai pasiekti.

Kaip kontroliuoti poraštę

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

Taigi, ką tai daro?

  • page-containerEina aplink viskas puslapyje, ir nustato minimalų aukštį 100% peržiūros srities aukštis ( vh). Kaip yra relative, jo antrinius elementus vėliau galima nustatyti atsižvelgiant į absolutepadėtį.
  • Joje content-wrapyra apatinis užpildas, kuris yra poraštės aukštis, užtikrinantis, kad poraštei būtų palikta pakankamai vietos konteinerio viduje, kuriame jie abu yra. Čia divnaudojamas įvyniojimas, kuriame būtų visas kitas puslapio turinys.
  • footerNustatyta absolute, prilipti prie bottom: 0page-containertai viduje. Tai svarbu, nes jis nėra absoluterodinio dalyje, bet judės žemyn, jei page-containeraukštesnis nei peržiūros sritis. Kaip minėta, jo aukštis, savavališkai nustatytas 2.5remčia, naudojamas content-wrapaukščiau.

Ir jūs turite tai. Dabar jūsų poraštė lieka ten, kur galėtumėte tikėtis!

Paskutiniai prisilietimai

Žinoma, tai yra CSS, todėl jis nebūtų išsamus be tam tikrų mobiliesiems skirtų UX svarstymų ir alternatyvaus požiūrio, naudojant min-height: 100%ne 100vh. Bet tai turi savų trūkumų.

Taip pat galima naudoti „Flexbox“ (su „flex-grow“) arba „Grid“, kurie abu yra labai galingi.

Kokį metodą pasirinksite, priklauso tik nuo jūsų ir jūsų dizaino specifikos. Tikimės, kad aukščiau pateiktas pavyzdys ir nuorodos padės sutaupyti šiek tiek laiko priimant sprendimą ir jį įgyvendinant.

Ačiū, kad skaitėte. Štai keletas kitų dalykų, kuriuos neseniai parašiau:

  • „Amazon Elastic Container Service“ vadovas pradedantiesiems
  • „React with Jest and Enzyme“ bandymai