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

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;
}Kopioi koodi

• display: flex; määrittää body-elementin flex-elementiksi.
• flex-direction: column; määrittää, että body-elementin sisältö sijoitetaan vertikaalisesti pinoon.
• justify-content: space-between; varmistaa, että sisältöelementit jaotellaan tasaisesti body-elementin sisällä koko body-elementin korkeudelta, mikä tarkoittaa, että alatunniste pysyy näytön alareunassa, jos sisältö ei täytä koko näytön korkeutta.
• min-height: 100vh; määrittää body elementin minimikorkeudeksi 100% näytön korkeudesta.

100vh voi mobiililaitteilla toimia kehnosti jos selaimen yläpalkin korkeutta ei ole laskettu pois. Tähän ratkaisuna max 1080px leveillä näytöillä voi käyttää 100vh sijasta 100svh. (svh on pienin mahdollinen näkymän korkeus.)

@media (max-width: 1080px)
{
    body {
        min-height:100svh;
    }
}Kopioi koodi

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;
}Kopioi koodi

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