Para browsers recentes você pode adicionar isto ao seu CSS:
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 60px; /* altura do seu footer */
}
Segundo o criador da solução, functiona com: IE8+, Chrome / Safari, Firefox e Opera.
A maior vantagem desta solução sobre as outras é que você não precisa criar wrappers em volta do seu conteúdo. Ela utiliza o próprio body
como wrapper.
Exemplo: Com muito conteúdo
- Sem muito conteúdo
###Exemplo: Com muito conteúdo
- Sem muito conteúdo
(O mesmo código foi utilizado para os dois exemplos, só o conteúdo que muda.)