Skip to main content
formatação de código
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166
<!doctype html>
<html>
<head>  
    <link rel="stylesheet" type="text/css" href="sample02.css">
</head>
<body>
  <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>

CSS

    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>
header {
    min-height: 255px;
    background-color: blue;
}
article {
    padding-bottom: 60px; 
    width: 900px; 
    margin: 0 auto;
}
footer {
    position: absolute; 
    bottom: 0px; 
    width: 100%; 
    height: 60px; 
    background-color: green;
}
 

<!doctype html>
<html>
<head>  
    <link rel="stylesheet" type="text/css" href="sample02.css">
</head>
<body>
  <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>

CSS

header {
    min-height: 255px;
    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 {
        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>
 

Pergunta protegida por ComunidadeBot
Tweeted twitter.com/#!/StackOverflowPT/status/475493575443357696
Fonte Link

Fixar o rodapé de uma página html e acompanhar o conteúdo da página

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.

<!doctype html>
<html>
<head>  
    <link rel="stylesheet" type="text/css" href="sample02.css">
</head>
<body>
  <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>

CSS

header {
    min-height: 255px;
    background-color: blue;
}
article {
    padding-bottom: 60px; 
    width: 900px; 
    margin: 0 auto;
}
footer {
    position: absolute; 
    bottom: 0px; 
    width: 100%; 
    height: 60px; 
    background-color: green;
}

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.