Skip to main content
Hávia me esquecido de ajusta o position: relative pois o código anterior se o contéudo for grande o footer vai ficar no rodapé da página. Se o contéudo for curto o position deve ser relative
Fonte Link

Uma solução simples e responsiva seria assim.

footer{
position: absolute;relative;
background-color: red;
width:100%;
height:48px;
left:0;
bottom:0;
}
<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>

Uma solução simples e responsiva seria assim.

footer{
position: absolute;
background-color: red;
width:100%;
height:48px;
}
<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>

Uma solução simples e responsiva seria assim.

footer{
position: relative;
background-color: red;
width:100%;
height:48px;
left:0;
bottom:0;
}
<header></header>

<article>
  <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>

Fonte Link

Uma solução simples e responsiva seria assim.

footer{
position: absolute;
background-color: red;
width:100%;
height:48px;
}
<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>