JQuery, change div height to automatically fill the rest of the screen if the content is not bigger

Question

My site is structured like this:

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

I am trying to get my “main” div to take the entire remaining height on the screen (and resize it while resizing the window), so that the “footer” always automatically translates to the bottom of the screen (it appears stuck at the bottom of the screen).

However, I want this to happen only if the contents of the "main" div are not at that height or even more. I am using jQuery, but it is difficult for me to calculate this correctly. Can someone give me a pointer in the right direction?

Answer 1

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

[ Look 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 height */ } .footer, .push { height: 142px; /* .push must be the same height as .footer */ }