Sticky footer tutorial

(Crossposted van Netlash-collega Johan's blog: Sticky footer tutorial.)

In deze tutorial ga je het volgende leren:

• Hoe een sticky footer implementeren (voorbeeld)
• Verifiëren of je layout degelijk is opgebouwd
• Werken met Firebug of de Webkit inspector om problemen op te lossen

Er wordt verwacht dat je websites opbouwt met semantische markup en een gelinkte stylesheet.

Wat is een sticky footer?

Een sticky footer is een footer die zich onderaan de pagina bevind, ongeacht de content. Een sticky footer plakt als het ware aan de onderkant van je pagina. Met onderaan de pagina bedoel ik helemaal onderaan de pagina, niet aan de onderkant van het browservenster. In dat geval is het probleem gemakkelijk opgelost door de footer absoluut te positioneren. Deze techniek wordt goed toegepast op fortuito.us

Maar goed, om een sticky footer te implementeren op een website moet je een aantal stappen doorlopen. Hou je vast, want het zijn er wel enkele.

1. Zorg dat je een global reset van je HTML-elementen hebt gedaan. Als je niet weet wat dit is, neem eens een kijkje bij Eric Meyer.

2. Ten tweede moet je website in een allesomvattende div zitten. Vele webdesigners hebben de gewoonte om hun html markup in een allesomvattende div te steken: meestal #wrapper, #container of #page genoemd. Doe dit.

3. Voor de volgende stap geef je je html en body-elementen in je CSS een hoogte van 100% mee. ( height: 100%; )

4. Daarna geef je ook je allesomvattende div (in mijn geval #container) een hoogte van 100% mee.

5. Deze stap kan je overslaan, maar hier worden de meeste fouten gemaakt: als je helemaal zeker van je layoutskills bent, ga alvast naar stap 6.

   In deze stap kijk je na of je allesomvattende div wel degelijk 100% van de hoogte van je browservenster inneemt. Dit kan je doen door met inspect in Firebug over de div te hoveren - als alles goed gaat zie je ofwel een kader rond je div dat de gehele hoogte van het browservenster inneemt, of een blauwgroene overlay die het vlak dat je div inneemt aangeeft.

   Als dit het geval is, ga naar stap 6. Is dit niet zo, is stap 5 voor jou.

   Indien je Webkit gebruikt om websites te ontwikkelen kan je de Web Inspector gebruiken. Door te rechtsklikken op je pagina en 'inspect element' te kiezen kan je gemakkelijk zien of je allesomvattende div de volledige hoogte inneemt.

   Debugtechnieken zoals een rode border toevoegen om te zien of je allesomvattende div de volledige hoogte inneemt zijn niet aan te raden - deze kunnen een vertekend beeld geven en zijn in deze situatie niet toepasbaar.

6. Je layout is verkeerd opgebouwd of bevat fouten. Valideer eerst je HTML om te kijken of je bijvoorbeeld geen divs bent vergeten te sluiten. Een handige Firefox-extension hiervoor is de HTML validator.

   Indien je floats gebruikt, mag je zeker niet vergeten die clearen. Neem eens een kijkje op Position is Everything, waar je haarfijn wordt uitgelegd hoe je floats kan clearen zonder extra markup.

   Indien je relatieve en absolute positioning gebruikt om je layout in orde te krijgen, is dit artikel door Shaun Inman aan te raden.

7. Proficiat - je layout is correct opgebouwd. Vanaf nu veronderstel ik dat er binnen je allesomvattende div meerdere andere divs zitten, die bijvoorbeeld een navigatie of een inhoudsgedeelte bevatten. In mijn geval bvb. een #container-div met daarbinnen #header, #navigation en #content en natuurlijk waar het hier allemaal om draait, de #footer.

   Deze logische opvolging moet je doorbreken om een sticky footer te kunnen implementeren. In deze stap zet je de div #footer buiten de #container-structuur. Daarnaast zet je een lege div met id="push" als laatste div binnen je container.

   Je opvolging van divs ziet er nu als volgt uit:

   • #container
     • binnen de #container-div alle divs buiten de footer (#navigation, #content, #sidebar, etc. )
     • als laatste div binnen de #container-div #push
   • #footer

8. Goed. De volgende stap is de hoogte van je footer berekenen. Het is slim om je footer een vaste hoogte mee te geven, bijvoorbeeld 50 pixels. Vergeet niet eventuele padding en borders bij de hoogte van je footer te rekenen. In Firebug en in de webkit inspector kan je zien hoe hoog een bepaald element is.

9. Je weet nu de hoogte van je footer. De volgende stap is diezelfde hoogte mee te geven aan je #push-div. Stel dat de hoogte van je footer 50px is, geef je #push een height-waarde van 50 px mee. ( #push { height: 50px; }

10. De volgende stap: je allesomvattende div een negatieve bottom margin mee geven van diezelfde hoogte. Stel dat je je #container initieel gecentreerd had, en die "margin: 0 auto;" meegekregen had, verander je deze nu naar "margin: 0 auto -50px auto". Of "0 auto -50px" voor de shorthand CSS-freaks.

11. Je sticky footer werkt nu in bijna alle browsers. Helaas moet je nog een laatste stapje toepassen om deze in Safari te laten werken. Geef je #container in plaats van een hoogte van 100% een minimumhoogte van 100% mee. Dit doe je door de css-eigenschap min-height: 100%; toe te passen.

12. We zijn er nog niet helemaal vanaf: omdat min-height niet ondersteund wordt door IE6 dien je een min-height hack te gebruiken om het geheel wel te laten werken. Voeg de volgende code toe: #container {
min-height: 100%; height: auto !important; height: 100%; }

13. Ook opletten: als je een gecentreerde layout hebt, moeten beiden de footer en de container-div een breedte mee krijgen, alsook auto voor de left en right margins. De #container-div krijgt uiteraard de negatieve bottommargin mee (enkele stappen terug).

14. Geef nu #container en #footer beide position: relative; mee in je CSS-bestand. Dit voorkomt dat de divs over elkaar schuiven bij het resizen van je browservenster.

15. Yeeeha! We hebben een sticky footer die in alle* browsers werkt.

De techniek

De techniek kort uitgelegd: je geeft je geheel (html, body) 100% hoogte mee. Je pagina vult nu dus het browservenster. Je #container heeft ook een height- waarde van 100%. Je geeft je footer een hoogte mee; door diezelfde hoogte mee te geven aan een lege div binnen je #container ben je zeker dat je plaats hebt om door middel van die div (#push) je footer omhoog te duwen.

* getest in Firefox 2 Mac/Win, Opera 9 Mac/Win, Safari 2, Safari 3 Mac/Win, Internet Explorer 6, Internet Explorer 7, Camino, Shiira, Webkit, Flock). In Opera schuift de sticky footer soms niet mooi mee bij het resizen van het browservenster, dit ligt aan Opera.

Dit artikel gaat over: webdesign - html - css - footer.
Sticky footer tutorial werd geschreven door Johan op 28-07-2007 (397 dagen geleden) - Share!

Reacties:

Re: Sticky footer tutorial

Ik gebruik nog steeds footerStickAlt, dd augustus 2005, die uiteraar op soortgelijke wijze werkt (http://www.themaninblue.com/writing/perspective/2005/08/29/).

Voor zij de freaken op het feit dat #footer 20px oogt in de CSS (en toch als 50px rendert): ken je box model en vergeet je padding er niet bij te tellen (2x15px). Voorbeeld had mssch effectief 50px omvat, met een line-height van 50px, zo staat de tekst ook netjes vertical-centered en slaan de beginners niet in paniek ;)

Bramus! , 28-07-2007 (397 dagen geleden)

 

Re: Sticky footer tutorial

Net even fortuito.us gecheckt (had ik beter meteen gedaan) ... zij gebruiken helemaal geen sticky footer, maar een fixed footer!

Om dat toe te passen gebruik je uiteraard een position:fixed; en om IE erin te luizen gebruik je een CSS expression om 'm ook netjes onderaan de viewport te houden.

Bramus! , 28-07-2007 (397 dagen geleden)

 

Re: Sticky footer tutorial

Point taken over fortuito.us, ze hebben blijkbaar een nieuwe methode gevonden. Dat moet ik eens onderzoeken.

Het artikel op A list apart van vorige week over de IE expressions was zeer interessant - ze gebruiken wellicht een gelijkaardige methode.

Als je een beginner bent kan je hier misschien beter niet aan beginnen, box model is toch wel een beetje basiskennis. Suggesties om de tutorial te verbeteren zijn altijd welkom.

Wolf , 28-07-2007 (397 dagen geleden)

 

Re: Sticky footer tutorial

Hey Wolf/Johan, beginners willen steeds alles doen en kunnen, zo was ik ook "in den beginne", vandaar de suggestie van de 50px ;)

De CSS Expressions staan idd netjes uitgelegd in ALA #241 :)

Bramus! , 29-07-2007 (397 dagen geleden)

 

Re: Sticky footer tutorial

Opletten met die CSS expressions. Je kunt beter gewoon de javascript uit die expression in een aparte functie steken en aan een event handler toekennen. Expression in CSS hebben namelijk de gewoonte om bij _elk_ event die in je pagina voorkomt uitgevoerd te worden. Dus ook telkens wanneer je je muis beweegt. Dat dit in honderden tot duizenden uitvoeringen van dezelfde expression leidt lijkt me duidelijk. Daarom dat je zoiets beter aan het resize event van je document hangt. Er zijn nog andere trucs, zoals een expression die zichzelf opheft door zichzelf te vernietigen.

Lode , 05-09-2007 (359 dagen geleden)

 

Re: Sticky footer tutorial

_0_ simply perfect! heb hier echt tijden mee zitten klooien.. thnx!

Babs , 09-11-2007 (293 dagen geleden)

 

Re: Sticky footer tutorial

Bedankt voor de tutorial, maar is er ook een methode om je content column door te trekken tot aan de footer? als ik mijn content div op 100% hoogte zet doet deze nix :-/

Frederik Jacques , 16-06-2008 (74 dagen geleden)

 

Re: Sticky footer tutorial

ik heb je tutorial gevolgd want ik krijg het nooit voor elkaar om een sticky footer te maken... heb alleen een probleem als mijn content langer is als de hele pagina. Dan verschijnt de footer wel onderaan maar zodra ik naar beneden scroll scrollt de footer mee naar boven en komt die dus halverwege de pagina te hangen...

doe ik iets verkeerd?

chris , 27-07-2008 (33 dagen geleden)

 

Reageer:

Naam

Jouw website adres

Jouw e-mail adres

Titel

Reactie

Ben jij een mens?

Hoeveel is zeven plus twee (in cijfers) ?