CSS Sticky Footer
CSS Sticky Footer er et lille trick til at få din hjemmesides footer til at blive i bunden af internet browseren - selvom du ikke har fyldt siden op.
Der har igennem årende været en del irritationer over den manglende mulighed for dette og de omveje man skulle igennem for at opnå et flot resultat med f.eks. JavaScript.
Support for Cross Browser Compatibility
CSS tricket virker med alle større browsere - selv Google Crome. Et udplug af understøttede browsere er
Sæt denne footer ind i dit design uden at opleve at sidens elementer overlapper andet indhold! Og så behøver du ikke et tomt <div> for at få det til at fungere ...
Kildekode
Kildekoden er ganske enkel og skrevet nedenfor.
CSS
/*
Sticky Footer Solution
by Steve Hatcher
http://stever.ca
http://www.cssstickyfooter.com
*/
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
/* CLEAR FIX*/
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
HTML
<div id="wrap">
<div id="main" class="clearfix">
</div>
</div>
<div id="footer">
</div>
Link: http://www.cssstickyfooter.com/