Eu preciso fixar a tag footer
no final da página html, mas quando o conteúdo exceder a página a tag footer
deve acompanhar o conteúdo e não ficar fixa.
Veja o código CSS é o código HTML que estou usando para isso.
header {
min-height: 55px; /* original era 255px mudei para caber no snippet */
background-color: blue;
}
article {
padding-bottom: 60px;
width: 900px;
margin: 0 auto;
}
footer {
position: absolute;
bottom: 0px;
width: 100%;
height: 60px;
background-color: green;
}
<header></header>
<article>
<p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
<p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
<p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
<p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
<p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
<p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
<p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
<p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
<p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
<p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
<p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
<p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
<p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
<p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
</article>
<footer></footer>
</body>
</html>
O problema é que a tag footer
com a propriedade position
com o valor fixed
deixa o rodapé fixo.
Quando mudo a propriedade position
para absolute
a tag footer
fica flutuando e não acompanha o conteúdo.