The jQuery sticky footer plugin sticks your footer, with or without set height, to the bottom of your page. You can also use the sticky footer plugin to stick other elements to the bottom of their parent. Check the demo for more information.
<html> <body> <div id="page"> <p>Content</p> </div> <div id="footer"> <p>Footer</p> </div> </body> </html>
.sticky-footer
{
position: absolute;
bottom: 0;
width: 100%;
}
$(window).load(function() {
$("#footer").stickyFooter();
});
$("#footer").stickyFooter({
// The class that is added to the footer.
class: 'sticky-footer',
// The footer will stick to the bottom of the given frame. The parent of the footer is used when an empty string is given.
frame: '',
// The content of the frame. You can use multiple selectors. e.g. "#header, #body"
content: '#page'
});