Dé ultieme Sticky Footer code
Webcreationz gaat eens een andere manier van blog-berichten schrijven, buiten webdesign-nieuws en trends gaan we ook handige en slimme HTML/CSS codes plaatsen. Want wie heeft kent de sticky footer code nu uit zijn hoofd?
Ge-update 01-11-2011 We hebben het allemaal wel eens geprobeerd om een sticky footer te maken, een footer balk die onderaan het browserscherm blijft als de content niet zo lang is en juist met de content omlaag gaat als deze grotere wordt. Toch lukt het nooit de eerste keer en uw code is toch altijd anders dan die van sticky footer demo’s op het web, correct? Tegenwoordig hoeft het niet zo heel moeilijk meer te zijn, met maar een paar CSS-classes en kleine trucjes heeft u een cross-browser sticky footer. Er zijn eigenlijk 3 mogelijkheden die u kan opsommen om te bepalen welke code bij u past:
- Een simpele sticky footer buiten de container div
- Een sticky footer met een 100% width en doorlopende achtergrond
- Een sticky footer die de achtergrond van de content naar beneden laat doorlopen
Een combinatie van deze 3 is hieronder voor u genoteerd! 😉
Sticky footer code combinaties, voor ieder wat wils!
U kan helemaal zelf bepalen of u een achtergrond erin plaatst en of u de footer een width van 100% of enkel bv 960px breed maakt. … dan wel de margin: 0 auto; neerzetten om de footer te centreren.
HTML
<div id="container">
<p>Content tekst</p>
<div id="spacer"></div>
</div>
<div id="footer">
<p>Footer tekst</p>
</div>
CSS
html, body { height: 100%; }
#container { min-height: 100%; height: auto !important; height: 100%; margin-bottom: -25px; /* hoogte footer */ }
#spacer { display: block !important; height: 25px; /* hoogte footer */ }
#footer { clear: both; height: 25px; /* hoogte footer */ }
De #spacer div zorgt ervoor dat de content niet achter de footer valt en houdt de footer onder de content tekst.
Dé ultieme sticky footer code kant en klaar voor gebruik!
Laat uw reactie achter en laat zien hoe uw site eruit ziet met de prachtige techniek van stick-footer-ing!
