Kako s funkcijo calc() prisiliti nogo (footer) na dno strani

Pri spletnih straneh s premalo vsebine se pogosto zgodi, da noga (footer) ne ostane na dnu zaslona, ampak se prilepi takoj pod vsebino, kar pusti grd prazen prostor spodaj. S pomočjo CSS funkcije calc() in enot vh (view-height) lahko to rešimo hitro in brez uporabe kompleksnih ogrodij.

Logika rešitve

Ideja je preprosta: vsebinski del strani mora imeti minimalno višino, ki je enaka celotni višini zaslona minus višina glave (header) in noge (footer).

Primer kode

Predpostavimo, da ima tvoja glava višino 80px, noga pa 100px. Vsebinski del (main) bomo nastavili takole:

header {
    height: 80px;
}

main {
    /* 100vh je celotna višina zaslona */
    min-height: calc(100vh - 180px);
}

footer {
    height: 100px;
}

Zakaj uporabiti calc()?

• Fleksibilnost: Funkcija omogoča mešanje različnih enot (npr. odstotkov in pikslov).
• Odzivnost: Ker uporabljamo 100vh, se bo višina samodejno prilagodila ne glede na to, ali uporabnik stran gleda na velikem monitorju ali majhnem telefonu.
• Enostavnost: Ni potrebe po "absolute positioning" ali "flexbox" trikih, če želiš le osnovno strukturo.