Rodapé fixo e rolagem de conteúdo WP - html, css, estouro, rodapé, pegajoso

Nós temos um site Wordpress em http://cmagics.eu/digitalmagazinepublishing que usa o tema responsivo2. Estamos tentando obter um cabeçalho que pareça funcionar bem, mas também estamos tentando obter um rodapé que simplesmente fica na parte inferior da página e funciona como o de http://ryanfait.com/sticky-footer/

Por causa da natureza ligeiramente enigmática do tema responsivo2, como posso;

1. mantenha o rodapé preso na parte inferior da página, usando o método correto, não posicione: fixo

2. Parar o conteúdo principal rolando desnecessariamente quando há muito espaço na página?

fonte de html:

view-source:http://cmagics.eu/digitalmagazinepublishing/

css

#footer {
position: relative;
clear:both;
font-size: 11px;
line-height: 1.5em;
background: rgb(54, 53, 53);
color: #fff;
border-top: 2px solid #444;
text-align:center;
margin-top: -324px; **just a hack to make the footer appear at the bottom incorrectly**
margin-bottom: -25px;
height: 162px;
font-family: Roboto Regular;
}

#site-container {
width: 900px;
margin: 130px auto 0 auto;
overflow:auto;
padding-bottom:162px;

}

.hfeed {
min-height:100%;
height:100%;
height: auto;

}

Respostas:

Aqui está uma solução que acho muito limpa. Use posicionamento absoluto para todos os seus principaiselementos de conteúdo (cabeçalho, artigo, rodapé). Use consultas @media para criar quebras em diferentes resoluções se você precisar alterar a altura do cabeçalho ou do rodapé para diferentes larguras de tela (design responsivo) e informar a área de conteúdo principal para ocultar o estouro. Também é possível usar layouts relativos flutuantes nas principais áreas de conteúdo dessa maneira.

Aqui está o rodapé css: -

#footer {
position: fixed;
font-size: 11px;
line-height: 1.5em;
background: rgb(54, 53, 53);
color: #fff;
border-top: 2px solid #444;
text-align: center;
margin-top: -324px;
margin-bottom: -25px;
height: 162px;
font-family: Roboto Regular;
bottom: 0;
width: 100%;
}