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

I believe the root of the problem is that the footer element in the HTML needs to be outside of the #container div. Also, I noticed after I removed that, issues with margin and padding on the body tag. Finally, the border-top on the .footer makes the height of the footer 46px, not 45px...

The corrected CSS:

/* FOOTER FIX */
html, body, div#container { height: 100%; }
body > div#container { height: auto; min-height: 100%; }
div#index_body { padding-bottom: 30px; }

body{margin:0;padding:0;}
#container{ margin-bottom: -46px; }
.footer { 
    clear: both; 
    position: relative; 
    z-index: 10; 
    height: 30px; 
    padding-top:15px;
    color: #666;
    background-color:#F4F7FA;
    border-top:1px solid #E6E7E8; 
    font-size:95%;
    text-align: center;  
}    /* END FIX */

The corrected HTML: