Como você faz com que o rodapé fique na parte inferior de uma página da Web?

StackOverflow https://stackoverflow.com/questions/42294

Pergunta

Eu tenho um layout simples de 2 colunas com um rodapé que limpa as divs direita e esquerda na minha marcação.Meu problema é que não consigo fazer com que o rodapé fique no final da página em todos os navegadores.Funciona se o conteúdo empurrar o rodapé para baixo, mas nem sempre é o caso.

Atualizar:

Não está funcionando corretamente no Firefox.Vejo uma faixa de cor de fundo abaixo do rodapé quando não há conteúdo suficiente na página para empurrar o rodapé até a parte inferior da janela do navegador.Infelizmente, este é o estado padrão da página.

Foi útil?

Solução

Para obter um rodapé fixo:

  1. Tenha um <div> com class="wrapper" para o seu conteúdo.

  2. Certo antes o fechamento </div> do wrapper Coloque o<div class="push"></div>.

  3. Certo depois o fechamento </div> do wrapper Coloque o<div class="footer"></div>.

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

Outras dicas

Use unidades CSS vh!

Provavelmente, a maneira mais óbvia e não hackeada de usar um rodapé fixo seria usar o novo unidades de janela de visualização css.

Tomemos por exemplo a seguinte marcação simples:

<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>

Se o cabeçalho tiver, digamos, 80px de altura e o rodapé tiver 40px de altura, então podemos fazer nosso rodapé fixo com uma única regra na div de conteúdo:

.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
}

Que significa:deixe a altura do conteúdo div ser pelo menos 100% da altura da janela de visualização menos as alturas combinadas do cabeçalho e rodapé.

É isso.

* {
    margin:0;
    padding:0;
}
header {
    background: yellow;
    height: 80px;
}
.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
    background: pink;
}
footer {
    height: 40px;
    background: aqua;
}
<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>

...e aqui está como o mesmo código funciona com muito conteúdo na div de conteúdo:

* {
    margin:0;
    padding:0;
}
header {
    background: yellow;
    height: 80px;
}
.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
    background: pink;
}
footer {
    height: 40px;
    background: aqua;
}
<header>header goes here</header>
<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
<footer>
    This is my footer
</footer>

Observação:

1) A altura do cabeçalho e rodapé deve ser conhecida

2) Versões antigas do IE (IE8-) e Android (4.4-) não suportam unidades de janela de visualização.(eu posso usar)

3) Era uma vez um webkit que tinha um problema com unidades de janela de visualização dentro de uma regra de cálculo.Isso realmente foi corrigido (Veja aqui) então não há problema nisso.No entanto, se você deseja evitar o uso de calc por algum motivo, você pode contornar isso usando margens negativas e preenchimento com dimensionamento de caixa -

Igual a:

* {
    margin:0;padding:0;
}
header {
    background: yellow;
    height: 80px;
    position:relative;
}
.content {
    min-height: 100vh;
    background: pink;
    margin: -80px 0 -40px;
    padding: 80px 0 40px;
    box-sizing:border-box;
}
footer {
    height: 40px;
    background: aqua;
}
<header>header goes here</header>
<div class="content">Lorem ipsum 
</div>
<footer>
    This is my footer
</footer>

Rodapé pegajoso com display: flex

Solução inspirada em Rodapé pegajoso de Philip Walton.

Explicação

Esta solução é válido apenas para:

  • Cromo ≥ 21,0
  • Raposa de fogo ≥ 20,0
  • Internet Explorer ≥ 10
  • Safári ≥ 6.1

É baseado no flex mostrar, aproveitando o flex-grow propriedade, que permite que um elemento seja crescer em ambos altura ou largura (quando o flow-direction está definido como column ou row respectivamente), para ocupar o espaço extra no contêiner.

Vamos aproveitar também o vh unidade, onde 1vh é definido como:

1/100 da altura da janela de visualização

Portanto uma altura de 100vh é uma maneira concisa de dizer a um elemento para abranger toda a altura da janela de visualização.

É assim que você estruturaria sua página da web:

----------- body -----------
----------------------------

---------- footer ----------
----------------------------

Para que o rodapé fique na parte inferior da página, você deseja que o espaço entre o corpo e o rodapé aumente tanto quanto for necessário para empurrar o rodapé na parte inferior da página.

Portanto nosso layout se torna:

----------- body -----------
----------------------------

---------- spacer ----------
                             <- This element must grow in height
----------------------------

---------- footer ----------
----------------------------

Implementação

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.spacer {
    flex: 1;
}

/* make it visible for the purposes of demo */
.footer {
    height: 50px;
    background-color: red;
}
<body>
    <div class="content">Hello World!</div>
    <div class="spacer"></div>
    <footer class="footer"></footer>
</body>

Você pode brincar com ele em o JSFiddle.

Peculiaridades do Safari

Esteja ciente de que o Safari tem um implementação deficiente do flex-shrink propriedade, o que permite que os itens diminuam mais do que a altura mínima necessária para exibir o conteúdo.Para corrigir esse problema, você terá que definir o flex-shrink propriedade explicitamente para 0 para o .content e a footer no exemplo acima:

.content { flex-shrink: 0; }
.footer  { flex-shrink: 0; }

Você poderia usar position: absolute a seguir para colocar o rodapé na parte inferior da página, mas certifique-se de que suas 2 colunas tenham o apropriado margin-bottom para que nunca sejam obstruídos pelo rodapé.

#footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
}
#content, #sidebar { 
    margin-bottom: 5em; 
}

Aqui está uma solução com jQuery que funciona perfeitamente.Verifica se a altura da janela é maior que a altura do corpo.Se for, então altera a margem superior do rodapé para compensar.Testado no Firefox, Chrome, Safari e Opera.

$( function () {

    var height_diff = $( window ).height() - $( 'body' ).height();
    if ( height_diff > 0 ) {
        $( '#footer' ).css( 'margin-top', height_diff );
    }

});

Se o seu rodapé já possui margem superior (de 50 pixels, por exemplo) você precisará alterar a última parte para:

css( 'margin-top', height_diff + 50 )

Defina o CSS para o #footer para:

position: absolute;
bottom: 0;

Você precisará então adicionar um padding ou margin para o fundo do seu #sidebar e #content para combinar com a altura #footer ou quando eles se sobrepõem, o #footer irá cobri-los.

Além disso, se bem me lembro, o IE6 tem um problema com o bottom: 0 CSS.Talvez você precise usar uma solução JS para o IE6 (se você se preocupa com o IE6).

Uma solução semelhante para @gcedo mas sem a necessidade de adicionar um conteúdo intermediário para empurrar o rodapé para baixo.Podemos simplesmente adicionar margin-top:auto para o rodapé e será empurrado para o final da página independentemente de sua altura ou da altura do conteúdo acima.

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin:0;
}

.content {
  padding: 50px;
  background: red;
}

.footer {
  margin-top: auto;
  padding:10px;
  background: green;
}
<div class="content">
  some content here
</div>
<footer class="footer">
  some content
</footer>

Use o posicionamento absoluto e o índice z para criar um div de rodapé fixo em qualquer resolução usando as seguintes etapas:

  • Crie uma div de rodapé com position: absolute; bottom: 0; e a altura desejada
  • Defina o preenchimento do rodapé para adicionar espaços em branco entre a parte inferior do conteúdo e a parte inferior da janela
  • Crie um contêiner div que envolve o conteúdo do corpo com position: relative; min-height: 100%;
  • Adicione preenchimento inferior ao conteúdo principal div isso é igual à altura mais preenchimento do rodapé
  • Colocou o z-index do rodapé maior que o contêiner div se o rodapé estiver cortado

Aqui está um exemplo:

    <!doctype html>
    <html>
    <head>
      <title>Sticky Footer</title>
      <meta charset="utf-8">
      <style>
      .wrapper { position: relative; min-height: 100%; }
      .footer { position: absolute; bottom:0; width: 100%; height: 200px; padding-top: 100px; background-color: gray; }
      .column { height: 2000px; padding-bottom: 300px; background-color: green; }
     /* Set the `html`, `body`, and container `div` to `height: 100%` for IE6 */

      </style>
    </head>
    <body>
      <div class="wrapper">
        <div class="column">
          <span>hello</span>
        </div>
        <div class="footer">
          <p>This is a test. This is only a test...</p>
        </div>
      </div>
    </body>
    </html>

Tente colocar um contêiner div (com overflow:auto) ao redor do conteúdo e da barra lateral.

Se isso não funcionar, você tem alguma captura de tela ou link de exemplo em que o rodapé não é exibido corretamente?

Uma solução seria definir a altura mínima das caixas.Infelizmente parece que não é bem suportado pelo IE (surpresa).

Nenhuma dessas soluções CSS puras funciona corretamente com redimensionamento dinâmico de conteúdo (pelo menos no Firefox e Safari), por exemplo, se você tiver um plano de fundo definido no div do contêiner, a página e depois redimensionar (adicionando algumas linhas) a tabela dentro do div, o a tabela pode ficar fora da parte inferior da área estilizada, ou seja, você pode ter metade da tabela em branco sobre tema preto e metade da tabela totalmente branca porque tanto a cor da fonte quanto a cor de fundo são brancas.É basicamente impossível corrigi-lo com páginas themeroller.

O layout de várias colunas div aninhado é um hack feio e o div de corpo/contêiner com 100% de altura mínima para colar o rodapé é um hack mais feio.

A única solução sem script que funciona em todos os navegadores que experimentei:uma tabela muito mais simples/curta com thead (para cabeçalho)/tfoot (para rodapé)/tbody (td's para qualquer número de colunas) e 100% de altura.Mas isso tem desvantagens semânticas e de SEO percebidas (tfoot deve aparecer antes de tbody.As funções ARIA podem ajudar mecanismos de pesquisa decentes).

CSS:

  #container{
            width: 100%;
            height: 100vh;
            }
 #container.footer{
            float:left;
            width:100%;
            height:20vh;
            margin-top:80vh;
            background-color:red;
            }

HTML:

           <div id="container">
               <div class="footer">
               </div>
           </div>

Isso deve funcionar se você estiver procurando um rodapé responsivo alinhado na parte inferior da página, que sempre mantém uma margem superior de 80% da altura da janela de visualização.

Para esta pergunta, muitas das respostas que vi são desajeitadas, difíceis de implementar e ineficientes, então pensei em tentar e criar minha própria solução, que é apenas um pouquinho de CSS e HTML.

html,
body {
  height: 100%;
  margin: 0;
}
.body {
  min-height: calc(100% - 2rem);
  width: 100%;
  background-color: grey;
}
.footer {
  height: 2rem;
  width: 100%;
  background-color: yellow;
}
<body>
  <div class="body">test as body</div>
  <div class="footer">test as footer</div>
</body>

isso funciona definindo a altura do rodapé e depois usando css calc para calcular a altura mínima que a página pode ter com o rodapé ainda na parte inferior, espero que isso ajude algumas pessoas :)

Eu mesmo lutei com isso algumas vezes e sempre descobri que a solução com todos aqueles divs dentro uns dos outros era uma solução confusa.Eu apenas brinquei um pouco e descobri pessoalmente que funciona e certamente é uma das maneiras mais simples:

html {
    position: relative;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

footer {
    position: absolute;
    bottom: 0;
}

O que eu gosto nisso é que nenhum HTML extra precisa ser aplicado.Você pode simplesmente adicionar este CSS e então escrever seu HTML como sempre

Várias pessoas colocaram a resposta para esse problema simples aqui, mas tenho uma coisa a acrescentar, considerando o quão frustrado fiquei até descobrir o que estava fazendo de errado.

Como mencionado, a maneira mais direta de fazer isso é assim.

html {
    position: relative;
    min-height: 100%;
}

body {
    background-color: transparent;
    position: static;
    height: 100%;
    margin-bottom: 30px;
}

.site-footer {
    position: absolute;
    height: 30px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

No entanto, a propriedade não mencionada nas postagens, provavelmente porque geralmente é padrão, é o posição:estático na etiqueta do corpo.A posição relativa não funcionará!

Meu tema wordpress substituiu a exibição padrão do corpo e isso me confundiu por um tempo irritantemente longo.

Eu conheço um tópico antigo, mas se você estiver procurando uma solução responsiva, esta adição do jQuery ajudará: 

$(window).on('resize',sticky);
$(document).bind("ready", function() {
   sticky();
});

function sticky() {
   var fh = $("footer").outerHeight();
   $("#push").css({'height': fh});
   $("#wrapper").css({'margin-bottom': -fh});
}

O guia completo pode ser encontrado aqui: https://pixeldesigns.co.uk/blog/responsive-jquery-sticky-footer/

Eu criei uma biblioteca muito simples https://github.com/ravinderpayal/FooterJS

É muito simples de usar.Após incluir a biblioteca, basta chamar esta linha de código. 

footer.init(document.getElementById("ID_OF_ELEMENT_CONTAINING_FOOTER"));

Os rodapés podem ser alterados dinamicamente recuperando a função acima com parâmetro/id diferente. 

footer.init(document.getElementById("ID_OF_ANOTHER_ELEMENT_CONTAINING_FOOTER"));

Nota: – Você não precisa alterar ou adicionar nenhum CSS.A biblioteca é dinâmica, o que implica que mesmo que a tela seja redimensionada após o carregamento da página, ela redefinirá a posição do rodapé.Eu criei esta biblioteca porque o CSS resolve o problema por um tempo, mas quando o tamanho da tela muda significativamente, do desktop para o tablet ou vice-versa, eles se sobrepõem ao conteúdo ou não permanecem mais fixos.

Outra solução são CSS Media Queries, mas você tem que escrever manualmente diferentes estilos CSS para diferentes tamanhos de tela enquanto esta biblioteca faz seu trabalho automaticamente e é suportada por todos os navegadores básicos com suporte a JavaScript.

EditarSolução CSS:

@media only screen and (min-height: 768px) {/* or height/length of body content including footer*/
    /* For mobile phones: */
    #footer {
        width: 100%;
        position:fixed;
        bottom:0;
    }
}

Agora, se a altura da exibição for maior que o comprimento do conteúdo, fixaremos o rodapé na parte inferior e, caso contrário, ele aparecerá automaticamente no final da exibição, pois você precisa rolar para visualizá-lo.

E parece uma solução melhor do que JavaScript/biblioteca.

Eu não estava tendo sorte com as soluções sugeridas nesta página antes, mas finalmente esse pequeno truque funcionou.Vou incluí-lo como outra solução possível.

footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}

Solução Flexbox

O layout flexível é preferido para alturas naturais de cabeçalho e rodapé.Esta solução flexível foi testada em navegadores modernos e realmente funciona :) no IE11.

Veja JS Fiddle.

HTML

<body>
  <header>
    ...
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
</body>

CSS

html {
  height: 100%;
}

body {
  height: 100%;
  min-height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  display: flex;
  flex-direction: column;
}

main {
  flex-grow: 1;
  flex-shrink: 0;
}

header,
footer {
  flex: none;
}

Para mim, a melhor maneira de exibi-lo (o rodapé) é ficar na parte inferior, mas sem cobrir o conteúdo o tempo todo:

#my_footer {
    position: static
    fixed; bottom: 0
}

PLUGIN PERSONALIZADO DO JQuery CROSS BROWSER - $.footerBottom()

Ou use jQuery como eu e defina a altura do rodapé como auto ou para fix, o que você quiser, funcionará de qualquer maneira.este plugin usa seletores jQuery, então para que funcione, você terá que incluir a biblioteca jQuery em seu arquivo.

Aqui está como você executa o plugin.Importe jQuery, copie o código deste plugin jQuery personalizado e importe-o após importar o jQuery!É muito simples e básico, mas importante.

Ao fazer isso, tudo que você precisa fazer é executar este código:

$.footerBottom({target:"footer"}); //as html5 tag <footer>.
// You can change it to your preferred "div" with for example class "footer" 
// by setting target to {target:"div.footer"}

não há necessidade de colocá-lo dentro do evento document ready.Funcionará bem como está.Ele recalculará a posição do seu rodapé quando a página for carregada e quando a janela for redimensionada.

Aqui está o código do plugin que você não precisa entender.Basta saber como implementá-lo.Ele faz o trabalho para você.Porém, se você quiser saber como funciona, basta dar uma olhada no código.Deixei comentários para você.

//import jQuery library before this script


// Import jQuery library before this script

// Our custom jQuery Plugin
(function($) {
  $.footerBottom = function(options) { // Or use "$.fn.footerBottom" or "$.footerBottom" to call it globally directly from $.footerBottom();
    var defaults = {
      target: "footer",
      container: "html",
      innercontainer: "body",
      css: {
        footer: {
          position: "absolute",
          left: 0,
          bottom: 0,
        },

        html: {
          position: "relative",
          minHeight: "100%"
        }
      }
    };

    options = $.extend(defaults, options);

    // JUST SET SOME CSS DEFINED IN THE DEFAULTS SETTINGS ABOVE
    $(options.target).css({
      "position": options.css.footer.position,
      "left": options.css.footer.left,
      "bottom": options.css.footer.bottom,
    });

    $(options.container).css({
      "position": options.css.html.position,
      "min-height": options.css.html.minHeight,
    });

    function logic() {
      var footerOuterHeight = $(options.target).outerHeight(); // Get outer footer height
      $(options.innercontainer).css('padding-bottom', footerOuterHeight + "px"); // Set padding equal to footer height on body element
      $(options.target).css('height', footerOuterHeight + "!important"); // Set outerHeight of footer element to ... footer
      console.log("jQ custom plugin footerBottom runs"); // Display text in console so ou can check that it works in your browser. Delete it if you like.
    };

    // DEFINE WHEN TO RUN FUNCTION
    $(window).on('load resize', function() { // Run on page loaded and on window resized
      logic();
    });

    // RETURN OBJECT FOR CHAINING IF NEEDED - IF NOT DELETE
    // return this.each(function() {
    //   this.checked = true;
    // });
    // return this;
  };
})(jQuery); // End of plugin


// USE EXAMPLE
$.footerBottom(); // Run our plugin with all default settings for HTML5
/* Set your footer CSS to what ever you like it will work anyway */
footer {
  box-sizing: border-box;
  height: auto;
  width: 100%;
  padding: 30px 0;
  background-color: black;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- The structure doesn't matter much, you will always have html and body tag, so just make sure to point to your footer as needed if you use html5, as it should just do nothing run plugin with no settings it will work by default with the <footer> html5 tag -->
<body>
  <div class="content">
  <header>
    <nav>
      <ul>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
      </ul>
    </nav>
  </header>

  <section>
      <p></p>
      <p>Lorem ipsum...</p>
    </section>
  </div>
  <footer>
    <p>Copyright 2009 Your name</p>
    <p>Copyright 2009 Your name</p>
    <p>Copyright 2009 Your name</p>
  </footer>

As soluções flexíveis funcionaram para mim no que diz respeito a tornar o rodapé fixo, mas infelizmente mudar o corpo para usar o layout flexível fez com que alguns de nossos layouts de página mudassem, e não para melhor.O que finalmente funcionou para mim foi:

    jQuery(document).ready(function() {

    var fht = jQuery('footer').outerHeight(true);
    jQuery('main').css('min-height', "calc(92vh - " + fht + "px)");

});

Eu entendi isso da resposta do ctf0 em https://css-tricks.com/couple-takes-sticky-footer/

Desde o Grade solução ainda não foi apresentada, aqui está, com apenas dois declarações para o elemento pai, se tomarmos o height: 100% e margin: 0 É garantido:

html, body {height: 100%}

body {
  display: grid; /* generates a block-level grid */
  align-content: space-between; /* places an even amount of space between each grid item, with no space at the far ends */
  margin: 0;
}

.content {
  background: lightgreen;
  /* demo / for default snippet window */
  height: 1em;
  animation: height 2.5s linear alternate infinite;
}

footer {background: lightblue}

@keyframes height {to {height: 250px}}
<div class="content">Content</div>
<footer>Footer</footer>

Os itens são distribuídos uniformemente no recipiente de alinhamento ao longo do eixo cruzado.O espaçamento entre cada par de itens adjacentes é o mesmo.O primeiro item está nivelado com a borda principal de partida e o último item está nivelado com a borda principal.

      div.fixed {
        position: fixed;
        bottom: 0;
        right: 0;
        width: 100%;
        border: 3px solid #73AD21;
      }
  <body style="height:1500px">

    <h2>position: fixed;</h2>

    <p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>

    <div class="fixed">
      This div element has position: fixed;
    </div>

  </body>

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top