First Using CSS:
HTML
<div class="page-wrap">
Content!
</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap
{ min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after
{
content: ""; display: block;
}
.site-footer, .page-wrap:after
{
height: 142px;
}
.site-footer {
background: orange;
}
Done...
Now using JQUERY:
HTML
<div id="footer">
Sticky Footer
</div>
CSS
#footer { height: 100px; }
JQUERY
// Window load event used just in case window height is dependant upon images
$(window).bind("load", function() {
var footerHeight = 0,
footerTop = 0,
$footer = $("#footer");
positionFooter();
function positionFooter() {
footerHeight = $footer.height();
footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
if ( ($(document.body).height()+footerHeight) < $(window).height()) {
$footer.css({
position: "absolute"
}).animate({
top: footerTop
}) }
else
{ $footer.css
({ position: "static" }) } }
$(window)
.scroll(positionFooter)
.resize(positionFooter) });
That's it...
HTML
<div class="page-wrap">
Content!
</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap
{ min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after
{
content: ""; display: block;
}
.site-footer, .page-wrap:after
{
height: 142px;
}
.site-footer {
background: orange;
}
Done...
Now using JQUERY:
HTML
<div id="footer">
Sticky Footer
</div>
CSS
#footer { height: 100px; }
JQUERY
// Window load event used just in case window height is dependant upon images
$(window).bind("load", function() {
var footerHeight = 0,
footerTop = 0,
$footer = $("#footer");
positionFooter();
function positionFooter() {
footerHeight = $footer.height();
footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
if ( ($(document.body).height()+footerHeight) < $(window).height()) {
$footer.css({
position: "absolute"
}).animate({
top: footerTop
}) }
else
{ $footer.css
({ position: "static" }) } }
$(window)
.scroll(positionFooter)
.resize(positionFooter) });
That's it...