En liten CSS Tutorial. Denne gangen ser vi på problemet med at footeren ikke alltid vil sitte på bunnen av siden, og hvordan vi kan fikse dette.
En velkjent nøtt i verdenen til webdesignere er å få den nederste delen av en webside (ofte kalt “footer”) til å plassere seg nederst på siden. Standarden er at footeren plasseres under det nederste elementet som allerede finnes på siden.
Dette er noe som man normalt sett, på travle websider, ikke merker ettersom innholdet som regel er lengre enn nettleservinduet uansett. Men om dette ikke er tilfellet oppfører footeren seg ganske kjipt.
Det er muligens best å illustrere problemet først:
La oss se på HTML-strukturen til kstudio:
<body> <div id="wrapper"> <div id="top"></div> <div id="container"></div> <div id="bottom"></div> </div> </body>
Det er et ganske standard oppsett. Body-tagen omkapsulerer naturligvis hele siden, mens en wrapper-div omkapsulerer alt innhold innenfor denne. Selve innholdet er oppdelt i en top-div (det brune feltet øverst), en container-div (alt av innhold med hvit bakgrunn) og en bottom-div (det brune feltet nederst) som footer.
CSS-koden er det som utfører “magien”. Den relevante koden er som følger:
html, body
{
height:100%;
}
#wrapper
{
min-height:100%;
position:relative;
}
#top {}
#container
{
padding-bottom:220px; /* Minst som footer-høyde */
}
#bottom
{
position:absolute;
bottom:0;
height:200px; /* Footerhøyde */
}
Og det er det hele. Poenget er å posisjonere footeren absolutt helt på bunnen av siden, da må wrapper-diven ha position:relative og en min-height på 100%. Footeren må også ha en fast høyde, og containeren må padde til denne høyden slik at teksten ikke kommer “bak” footeren når siden er lengre enn skjermbildet.
Denne løsningen fungerer, og den er testet i Firefox 3, IE 7, Opera 9 og Chrome 1. Det er uvisst om den fungerer i eldre nettlesere, som IE 6, men hvem bryr seg :-)
kl. 10:34 #
Hei, jeg lurte på en ting ang. dette, hvordan kan jeg få footeren til å ligge i bunnen av nettleseren, og ikke i bunnen av siden? Så den blir liggende i ro uansett hvor langt ned man scroller? :P
- Kristoffer
kl. 19:32 #
hvorfor ikke:)