Question

My site is structured roughly like this:

-----------------
      header
-----------------
     |           
     |           
 side|    main  
     |
     |
-----------------
      footer

I’m trying to get my “main” div to take all of the remaining height on the screen (and resize during window resizing), so that “footer” is always automatically pushed to the bottom of the screen (appearing to be stuck at the bottom of the screen).

However, I want this only to happen if the content of the “main” div isn’t already at that height or even larger. I’m using jQuery but I have a hard time calculating this correctly. Can someone give me a pointer in the right direction?

Answer 1

The method is called sticky footer, and you don’t need jQuery for that. You can use CSS:

[See it in action]

/* 
Sticky Footer by Ryan Fait
http://ryanfait.com/sticky-footer/ 
*/

* {
 margin: 0;
}
html, body {
 height: 100%;
}
.wrapper {
 min-height: 100%;
 height: auto !important;
 height: 100%;
 margin: 0 auto -142px; /* the bottom margin is the negative 
                              value of the footer's height */
}
.footer, .push {
 height: 142px; /* .push must be the same height as .footer */
}