I just tried the jquery sticky footer from http://css-tricks.com/snippets/jquery/jquery-sticky-footer/
But unfrotunately, it didn't work. The code is below, I need your help.

The Script Section of my test page:

<script>
	$(window).bind("load", function() { // The Script for JQuery Sticky Footer starts here 

	   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)
	   
	}); // The JQuery footer script ends
	$(document).ready(function() { // These scripts are my own scripts, it has no dealing with the previous one
		$('table').hide(); 
		$('h2.terms').click(function() { // Hide/show the table data
			$(this).next('table').slideToggle(300);
		});
		$('#content tr').each(function() { // Highlights hovered table data
			$(this).hover(function() {
				$(this).find('td').css({'background' : 'gray', 'color' : 'white', 'cursor' : 'default'});
			},
			function() {
				$(this).find('td').css({'background' : '-moz-linear-gradient(bottom, #fff 60%, #ddd 92%)', 'color' : '#5b5b5b'});
			});
		});
		$('#sidebar .infos').hide(); // Hide/show the syllabus
		$('#sidebar h2').click(function() {
			$(this).next('.infos').fadeToggle(300);
		});
	});
</script>

The CSS Footer section of my test page:

#footer {
	margin: 0;
	padding: 0;
	clear: both;
	font-size: 13px;
	background: -moz-linear-gradient(top, #825912 46%, #000 105%);
	color: white;
	border-radius: 0 5px 5px;
	height: 100px;
}
#footer p {
	padding: 1em;
	font-family: Arial, Helvetica, sans-serif;
}