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.