myynti@metsosivut.fi

041 498 9805

Soita

"*" näyttää pakolliset kentät

Kenttä on validointitarkoituksiin ja tulee jättää koskemattomaksi.
041 498 9805
Aloitetaan keskustelu
footer pysymään näytön alareunassa

Miten saada footer pysymään näytön alareunassa CSS:n avulla?

  1. Home
  2. /
  3. Nörttiblogi
  4. /
  5. Miten saada footer pysymään...

Tässä artikkelissa näytän, miten voit käyttää CSS Flexboxia ja “justify-content”-ominaisuutta pitämään footerin näytön alareunassa vaikka sisältöä ei olisi näytön korkeuden vertaa.

CSS:n ja Flexboxin perusteet

CSS (Cascading Style Sheets) on tyylikieli, jota käytetään verkkosivujen ulkoasun määrittelyyn. Yksi CSS:n tehokkaimmista työkaluista on Flexbox, joka mahdollistaa elementtien sijoittelun rinnakkain. Flexboxia voi käyttää myös pystysuunnassa ja tätä ominaisuutta käytämme nyt apuna.

Vaihe 1: Määritä body-elementti Flex-elementiksi

Ensimmäinen askel on määrittää sivuston body-elementti Flex-elementiksi:

body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height:100vh;
}

Vaihe 2: Määritä alatunnisteen marginaali

Seuraavaksi haluamme varmistaa, että alatunnisteen yläpuolella olevat elementit pysyvät toisissaan kiinni näytön yläreunassa jos niiden yhteenlaskettu korkeus ei kata näytön korkeutta vähennettynä alatunnisteen korkeudella. Tämä tapahtuu määrittämällä alatunnisteen ylämarginaaliksi “auto”:

footer {
    margin-top: auto;
}

Alatunnisteen ylämarginaali työntää footeria mahdollisimman paljon alaspäin. Eli tässä tapauksessa työntää sen yläpuolella olevia elementtejä ylöspäin.

Metsosivut