Sticky footer not working as planned

I have a sticky footer that is working fine on a music site, however, when I click on the genre with the most albums it doesn't make the page longer and they overlap. This makes the links unreadable as parts of the image in the footer are behind them.

This is my code for the sticky开发者_StackOverflow社区 footer

html, body
{
    height: 100%;
}

#wrapper
{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -80px;
}

#footer, .push
{
    height: 60px;
}

Because ASP.NET inserts the main content into a form tag, you have to set the form height to 100%.

Change your CSS to the following should fix the problem:

html, body, form
{
    height: 100%;
}

EDIT In wrapper, you specify a negative space of 80px, and in the footer you specify a height of 60px. These should be the same values unless you have child elements not shown that are expanding the footer height. Try making those values the same (either both 80 or both 60, whichever fits the footer better).