Slik lager du "Sticky footer"

Lag en sticky footer når du ønsker at footeren alltid skal være nederst i vinduet i nettleseren.

• Footeren skal være nederst når innholdet ikke fyller vinduet i høyden
• Footeren skal ikke være synlig og i veien når innholdet fyller ut i høyden

Det finnes mange måter å gjøre dette på. Dette er en måte som fungerer veldig godt i gamle og nye nettlesere. (IE6+, iPad, Chrome, Safari, Firefox, Opera...)

Se også et bilde av et eksempel nederst i artikkelen.

• Table - css: width:100%;height:100%;, cellpadding:0, cellspacing: 0
• tr
• td - css: height:1px;
• Legg headeren din her
• tr
• td - css: valign:top;
• Legg innholdet ditt her
• tr
• td - css: height:1px;
• Legg inn footeren din her

For å legge inn cellpadding, cellspacing og valign bruk avansert knappen på hvert enkelt element. For å legge inn css bruk "Elementinnstillinger" til høyre for "Struktur" i designeren.

Strukturen din skal bli lignende den som er vist i bildet under.

Legg till følgende CSS under egendefinerte stiler for designstilarket:

html, body, form {height:100%;padding:0;margin:0;}

Viktig for å unngå vertikal scroll bar på siden:

• Ikke legg inn noe utenfor table elementet som tar opp plass i siden
• Ikke legg inn annen CSS på background i designeren (dette gjelder body{}, form{} og html {} angivelser) som gir disse padding, margin eller border.

Footeren legger seg alltid nederst i vinduet, uansett om innholdet fyller ut i høyden eller ikke.