Why doesn't my sticky footer stick?

Question

I\'ve browsed to all question related to \"sticky footer\" and nothing helped me because my #content div does not always have sufficient content to push the footer to the bo

Answer 1

This will work, no matter what the height of the #container is:

CSS:

    html, body {
        height: 100%;
    }

    #container {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin-bottom: -50px;
        position: relative;
    }

    #index_footer {
        height: 50px;
        line-height: 50px;
        position: relative;
        background: #CCC;
    }

    #push {
        height: 50px;
    }

HTML:

    

        test
    
    
 


    test