Estou tentando colocar meu rodapé no final da minha página. Eu segui vários tutoriais diferentes (a maioria deles muito semelhantes) em rodapés pegajosos, mas nenhum deles funcionou para mim. Por alguma razão, o rodapé adere ao fundo da tela em vez da página ...

Este é o layout das divs no meu HTML:

<div id="wrapper">
<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>
</div>

Este é o meu CSS:

html, body {
height: 100%;

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

#content {
position: absolute;
padding-bottom: 300px; (same as footer height)
}

#footer {
width: 100%;
height: 300px;
position: absolute;
bottom: 0px;
}