How to create sticky footer

[davidm]

Hi,
I’m using Weaver Xtreme without Plus (at the moment) and was trying to get the footer to stick to the bottom of the screen, this solution  – adjusted according to the Weaver documentation – worked for me and I thought it might help others.

I installed Jetpack, activated “Edit CSS” and inserted the following css:

html, body { padding: 0;  margin: 0;  height: 100%;}

#wrapper { position: relative;  min-height: 100%;}

#colophon { position: absolute;  bottom: 0;  left: 0;  right: 0;}

* Not sure which section contentclass class refers to, I commented it out, can be it’s connected to the height of the footer.
.contentclass {
    padding-bottom: 160px;
}

*/

[scrambler]

If you have Plus, there is a built in fixed bottom insertion area you can use for that.

To fix the current footer without it, you can use different method. but if using the absolute positioning, all you should need is
#colophon {position:absolute;bottom:0;left:0;}

That places the footer above everything else at the bottom of the wrapper. But that means it will cover the bottom of the container, hiding that part from view.

So you need to also add the rule below using a value as high as the footer to create a space at the bottom of the container
#container {padding-bottom:100px;}

[davidm]

Hi Scrambler, Are you saying I just need:

#colophon {position:absolute;bottom:0;left:0;} and

#container {padding-bottom:100px;}

’cause that didn’t work for me – the footer appeared in the middle of the page

[scrambler]

We need a link to your page with the CSS in to see your exact configuration and what is going on

[Author]

Posts