Q: Stick footer no css tutorials works with enjoyment I have an easy task: stick a footer to the bottom (sticky footer).
I searched several threads on stackoverflow and google.
It seems that there are two techniques:


*

*http://ryanfait.com/sticky-footer/layout.css,http://www.cssstickyfooter.com/style.css
( resetting all elements padding and margin, stretching wrapper, clearing both or other additional mods)

*Absolute positioning
The first looks for me like some hack (and didn't work either) so I wanted to stick to the absolute positioning (bottom: 0;) but here I mentioned that pages with large content (many paragraphs) the footer hangs in the middle when I scroll down...
However here is the fiddle, hope somebody finds my error:
http://jsfiddle.net/379gr/
Regards

A: This is FooterStick: http://jsfiddle.net/jAbw4/.
Back to your code. Set the #content_wrapper's property 'position' to relative. Otherwise, the containing block will be the initial containing block. The initial containing block covers the area of the viewport and as a result of that, your footer behaves as described in your question.
By the way: Cameron Adams writes about a more robust method of positioning a footer: FooterStickAlt. He prefers FooterStickAlt since a painting error in older versions of gecko browsers and IE's can be observed (when FooterStick is used): the footer is not positioned correctly when the height of the content varies a lot during the loading process. So therefore if for example pictures with no dimension information are included, the absolute positioned element remains at the position that is determined first time around and doesn't move with the growing content down. FooterStickAlt doesn't have this problem.

A: Check it out: http://jsfiddle.net/sTW6t/1/
This is what I made a while ago when using a sticky footer with a relative position. Let some jquery do the trick and voila ;-) What it does is calculating the height so the footer knows where he needs to stay, sticky.
$(function() {
function positionFooter() {

    var windowHeight = $(window).height();
    var documentHeight = $('#pagewrap').height();

    if (windowHeight > ($('#content').height() + $('#header').height())) {
        var pagewrapHeight = windowHeight - $('#footer').height();
        $("#pagewrap").height(pagewrapHeight);
    }
}

positionFooter();
$(window).resize(positionFooter)

});
Cheers!
