Css Sticky Footer - Responsive

Question

I am trying to create a sticky footer on a custom WordPress theme. I have looked at many online tutorials with no success.

It does not seem to be working responsively, it sticks, but as soon as I re-size the browser the height increases.

The footer needs to be responsive but also stick to the bottom of the page regardless of content size.

The website in question is:

http://shopexample.co.uk/

Would really appreciate some help on this one.

Thanks :)

Answer 1

The problem is not your footer expanding, it is related to image dimensions and body.

When you resize your browser (smaller), the background-images' size adapts to the viewport's width, not its height. That means that at a certain point, the image doesn't vertically fit the viewport anymore.

Then what is visible is the background-color of your body.custom-background, which is, coincidentally, exactly the same color as your footer's background (background-color: #cccccc;).

You can change the background-color of your body to distinguish it from the footer. You cannot resize the image to full-browser width AND height simultaneously without distortions.

Sticky footers: I noticed your footer & its wrapper are not positioned fixed or relative, which is the common approach for sticky footers. Then position it with the bottom property.

Fixed position:

• will stick to bottom
• will not scroll
• will always be visible

Relative position:

• will stick to bottom
• will scroll
• will only be visible on reaching page bottom

Answer 2

Check the working copy of your fiddle here http://jsfiddle.net/Mohinder/Yj6gu/

Problem was with headerwrap which was not closed where it should be and with body height.