Genesis WordPress Sticky Footer via CSS/jQuery

Alright, Folks, I'm driving myself batty with this one.

For a client, I've been making loads of sites with Genesis & WordPress. However, on certain sites the theme doesn't look fantastic without a sticky footer.

The problem is that no good sticky footer seems to be around specifically for Genesis. This results in what you see here on the homepage:

Essentially, the content isn't long enough, so the footer doesn't rest at the bottom, usual suspects, etc. I've tried editing functions.php in conjunction with CSS, I've tried raw CSS fixes, and I've also tried some jQuery footers. No such luck.

The fix I'm using now that works is this:

/* Sticky Footer Fix - It's like "Dirty Dancing" & "Footloose" Had a Baby . . . Mmmmm . . . */

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {height: 100%;}

#wrap {height: 100%;}

#inner {min-height: 79%;
    margin-bottom: 66px; /* must be same height as the footer */
    overflow: hidden;}  

#footer {position: relative;
    margin-top: -66px; /* negative value of footer height */
    height: 66px;

It works alright, but it's just not accurate enough for my taste. You can view what it's doing at this site

So here's my question:

What's the best way to make a footer stick to the bottom of the page in Genesis when content is not long enough?

I'm amazed it's been this dang hard, so I'm assuming I'm just missing something. Surely other people are doing this and have a fix running.

Any thoughts (CSS or jQuery) are appreciated! Seriously done losing sleep over this one.


This worked great - I added this to the custom CSS stylesheet and - sticky footer:

.site-footer {  
     position: fixed;
     bottom: 0px !important;
     width: 100%;
     min-height: 100px; // change to height of your footer
     padding-top: 20px; // change padding to desired amount
     padding-bottom: 20px;
     left: 0;
     margin: 0;


Need Your Help

SCons and/or CMake: any way to automatically map from “header included during compilation” to “corresponding object file must be linked”?

build cmake scons

Super-simple, totally boring setup: I have a directory full of .hpp and .cpp files. Some of these .cpp files need to be built into executables; naturally, these .cpp files #include some of the .hpp

Precise pixel grid overlay in Core Graphics?

cocoa core-graphics nsimage cgimage

In my experiments with creating a pixel-centered image editor I've been trying to draw a precise grid overlay to help guide users when trying to access certain pixels. However, the grid I draw isn'...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.