Sticky footers have been an issue most frontend developers have run into and everyone has their own way of dealing with them. In this post, I’m going to go over how I create sticky footers using jQuery.
How it Works
An average site consists of 4 elements I’ll be targeting. The body, header, main content area and footer. What I want to do is dynamically set a min-height CSS style to the main content area. To work out what the min-height should be I simply minus the header & footer height from the body height.
Let’s assume you have a body height of 800px and a header & footer of 100px each. In theory, would mean the min-height of your main content area should be 800 – 100 – 100 = 600px.
We start by getting the height of the body, header & footer.
Next, set the min-height variable by subtracting the header & footer from the body.
Finally, we target the main content area and set the min-height.
Altogether this is the code. You’ll need to adjust the target elements to match your HTML.
Hope this was helpful or if you know of a better way of creating a sticky footer.