Simple Sticky Footer Using jQuery

I was recently working on a project that required a sticky footer. I needed the footer to always be aligned flush with the bottom of the screen. This was no problem when there was enough content to push the footer against the bottom edge. But what happens when there isn’t enough content? You end up with a floating footer and that’s no fun.

I immediately Googled the problem and found a bunch of various jQuery and CSS solutions. When I tried them though, none of them seemed to do exactly what I wanted them to do. Plus my code was structured a little differently than the examples. I decided to just try to come up with my own solution using jQuery. I’ve had enough of dealing with IE’s quirks, IE understands JQuery so it seemed like the easiest solution.

In order for this to work, the footer can’t be in a wrapper class. The code would have to be structured like this example:

<div id="page"></div>
<footer id="colophon"></footer>

Also, it is required that you set margin and padding for body to 0. These are the only requirements as far as I know of that have to do with CSS.

body {
    margin: 0;
    padding: 0;

The idea behind the jQuery was pretty simple. Check the height of the element, then check the height of the viewport. If the viewport height is greater than #page’s height, then we need to set some CSS on the footer. That CSS will just absolutely position it at the bottom of the frame. It’s a good idea to make sure your footer’s width is 100% so it looks right.

I brought in jQuery and inserted the code.

<script type="text/javascript" src=""></script><script type="text/javascript">
$(document).ready(function() {
  var bodyHeight = $("body").height();
  var vwptHeight = $(window).height();
  if (vwptHeight > bodyHeight) {

In order to make this work with older versions of IE (< IE9), include Google's HTML5 shiv. [html] <!-- Add conditional for IE7 + 8 support --> <!--[if lte IE 8]> <script src=""></script> <![endif]--> [/html]

See the demo

Worked like a charm for my purposes. Feel free to modify it for your own use. If you have any questions or comments, feel free to leave a comment! 🙂

It is all over, but there’s a new chapter ahead!

After 2 1/2 years, it is finally over- I went back to school and actually finished it!  It has been a 10 year road from start to finish, but I am officially a college graduate from SUNY Oswego with a major in Information Science and a minor in Computer Science.  I learned so much during my time at Oswego and have grown so much as a person.  The field of CS definitely changed the way I think about things.  It enabled me to be a more effective problem solver and it equipped me with many skills that I am very grateful for including Android app development, PHP/MySQL web applications, as well as learning 5 languages in 1 semester (C, LISP, Scala, Prolog, Python)!

Am I completely done with school?  I don’t know.  I can’t throw out the possibility of one day getting my master’s degree, but for now that isn’t something I’m thinking about.  The notion of starting “life” (i.e. get a job, house, etc), is pretty scary.  One thing I know for sure is that I got an extremely quality education at SUNY Oswego.  If you’re reading this and thinking about attending SUNY Oswego in either Information or Computer Science, I can’t recommend it enough.  It is extremely challenging, but what you leave with is worth the stress.

The soon to be demolished Snygg Hall.
The soon to be demolished Snygg Hall.
Spring at SUNY Oswego
Spring at SUNY Oswego
I enjoyed my time at SUNY Oswego
I enjoyed my time at SUNY Oswego

So what is next?  After applying for multiple jobs in the arena of web development, I am extremely excited to say I received a job offer from Binghamton University as a full-time web developer.  My wife and I will be moving there as soon as we can find a place and we will start a new chapter of our lives.  Thank you SUNY Oswego and here I come, Binghamton!

Testing Websites In Different Versions of IE

As a web developer, older versions of IE can be a little tricky to work with. They require a little more time and attention than Chrome or Firefox. HTML and CSS rules are somehow different in IE than in other browsers so it’s important to make sure your site works in IE. The absolute best way would be to download a VM image of Windows XP and actually run IE6 and IE7 to test your site. But, if you’re not into installing a VM of XP, there’s something you can do: IETester.

I’ve used it a couple times and it seems to have a few bugs in it, but overall its a nice free tool to check what your site looks like in IE.

Free Online Computer Courses From Stanford University

The flow of information in this day and age is absolutely phenomenal.  Choose wisely how you use your time – the ONLY non-renewable resource.  I realized I spent a lot of my day consuming information dessert, instead of information that will actually help me to be a better person or help other people.

To make a long story short, I’m trimming my internet usage to consume more information vegetables instead of information dessert.  To know more about what I’m talking about, check out Justin Pots’ article called Eating Only Dessert: Why Your Information Diet Is Probably Terrible.  He makes the point that industrialization has taken over a lot of aspects of our society, and now it’s fully integrated into our media consumption.  The result?  Lots of cheap, unsubstantial information.  Lets face it, research and statistics are hard.  Why not just talk about a new laptop that’s coming out or how X celebrity is doing.

The bright side?  This is the internet!  As much garbage information is out there, there’s also a lot of useful information for self or societal betterment.  I just recently stumbled upon Stanford’s Open Classroom.

Ever wanted to learn how to program or wonder exactly what goes in to making a web application?  Or maybe look into algorithm design?  Check out Stanford’s Open Classroom for lots of awesome classroom information.  You can even get a signed certificate from the teacher after proving you’ve completed the course.