Most of the time, I want my footer to anchor to the bottom of the page. If the page contents are very short, this won't happen naturally. Enter: jQuery-StickyFooter. It takes the pain out forcing a page footer, and it won't block any of your content.
You can view the selectboxes in action here.
jQuery-StickyFooter is inspired by The Man In Blue's solution. I use most of his tricks, and try to make it more robust by using javascript.
The advantages of a JS implementation:
- You don't need to know the height of the footer beforehand.
- You don't need to manually set a padding on any of your elements.
- Automatically clips interior margins that mess up footer positioning (can be turned off).
The cons:
- If you're doing some weird CSS like body>#content, this will break because the DOM is modified.
- The footer will not stick if Javascript is turned off.
This works by breaking the DOM into two top-level elements: non_footer and footer. We use some css tricks to make sure the non_footer is at least the size of the view. Then we add some internal padding (space for the footer) and set a negative margin to place the footer in that space.
All combined, this forces the footer to the bottom of the page without obscuring any body contents.
This plugin expects markup like:
<!DOCTYPE html>
<html>
<head>
...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="/jquery.stickyfooter.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#footer").stickyFooter();
});
</script>
</head>
<body>
Some contents
<div id="contents">
more contents here
</div>
.
.
.
<div id="footer">
Put anything you want in the footer.
</div>
</body>
</html>
By default, it attempts to clip interior margins that change the positioning of the footer. If you want to handle this yourself, set to false.
The class of the element that applies padding space for the footer. Sometimes it's useful to have access to it.
The class of the element that wraps everything except the footer.
If you run into problems, feel free to report them on the Issues Page.
Here's what I know so far.
- Does not work in IE6 and below.
- Does not automatically fix double margin bug in IE7.
- May break your CSS or JS if you're using weird selectors.