.
Quando uma página contém uma grande quantidade de conteúdo, o rodapé é empurrado para fora da janela de visualização e, se você rolar para baixo, a página ‘termina’ no rodapé. No entanto, se a página tiver uma pequena quantidade de conteúdo, o rodapé às vezes pode “grudar” na parte inferior do conteúdo, flutuando no meio da página e deixando um espaço em branco embaixo.
Aqui está uma solução fácil com CSS puro:
HTML:
<body>
<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
padding:10px;
background:#5ee;
}
#content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
background:#ee5;
}