Kuinka pitää alatunnisteesi siellä missä se kuuluu?

Tämä viesti on saatavana myös koreaksi .

Alatunniste on sivun viimeinen elementti. Vähintään se on näkymän alaosassa tai pienempi, jos sivun sisältö on korkeampi kuin näkymä. Yksinkertainen, eikö? ?

Kun työskentelet alatunnisteen sisältävän dynaamisen sisällön kanssa, ilmenee joskus ongelma, jossa sivun sisältö ei riitä sen täyttämiseen. Alatunniste sen sijaan, että se pysyisi sivun alaosassa, missä haluaisimme sen pysyvän, nousee ylös ja jättää tyhjän tilan sen alle.

Nopea korjaus voidaan sijoittaa alatunniste ehdottomasti sivun alaosaan. Mutta tällä on oma haittansa. Jos sisältö kasvaa näkymää suuremmaksi, alatunniste pysyy 'jumissa' näkymän alaosassa, haluammeko sen vai ei.

Tämä osoittaa käyttäytymisen, jota emme halua ja haluamme:

Katsotaanpa lähestymistapaa tämän saavuttamiseksi.

Alatunnisteen hallinta

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

Joten mitä tämä tekee?

  • page-containerKiertää kaikki sivulle, ja asettaa sen minimikorkeus 100%: n näkymän korkeus ( vh). Sellaisena kuin se on relative, sen alielementit voidaan asettaa absolutesijainnin perusteella myöhemmin.
  • content-wrapOn pohja pehmuste, joka on korkeus footer varmistaen, että täsmälleen riittävästi tilaa jää alatunnisteesta säiliön sisällä ne ovat molemmat. Päällys divkäytetään tässä, joka sisältäisi kaikki muut sivun sisältöä.
  • Se footeron asetettu pitämään absolutekiinni siitä bottom: 0, missä page-containerse on. Tämä on tärkeää, koska se ei ole absolutenäkymälle, mutta se liikkuu alaspäin, jos se page-containeron korkeampi kuin näkymä. Kuten todettiin, sen korkeutta, joka on mielivaltaisesti asetettu 2.5remtähän, käytetään content-wrapyllä olevassa.

Ja siellä sinulla on se. Alatunnisteesi pysyy nyt siellä, mitä voit odottaa!

Viimeinen kosketus

Tietenkin tämä on CSS, joten se ei olisi täydellinen ilman joitain mobiilikohtaisia ​​UX-näkökohtia ja vaihtoehtoista lähestymistapaa, joka käyttää min-height: 100%pikemminkin kuin 100vh. Mutta tällä on omat haittansa.

Flexboxia (joustavasti kasvavaa) tai Gridiä voidaan myös käyttää, ja molemmat ovat erittäin tehokkaita.

Menetelmä, jonka valitset, riippuu täysin sinusta ja suunnittelusi yksityiskohdista. Toivottavasti yllä oleva esimerkki ja linkit auttavat sinua säästämään aikaa päätöksenteossa ja sen toteuttamisessa.

Kiitos lukemisesta. Tässä on muutama muu asia, jonka olen kirjoittanut äskettäin:

  • Aloittelijan opas Amazonin Elastic Container Service -palveluun
  • Reagoinnin testaaminen Jestin ja entsyymin kanssa