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

291

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

Bill the Lizard
fonte
Vou adicionar ao @ Jimmy: Você também precisa declarar o posicionamento absoluto (ou relativo) para o elemento que contém o rodapé. No seu caso, é o elemento do corpo. Edit: Eu testei-o em sua página com firebug e parecia funcionar muito bem ...
yoavf
pode ser necessário esticar o html-page-to-full-height como este link diz: makandracards.com/makandra/…
sina

Respostas:

199

Para obter um rodapé fixo:

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

  2. Logo antes do fechamento </div>do wrapperlocal, o <div class="push"></div>.

  3. Logo após o fechamento </div>do wrapperlocal 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 */
}
Staale
fonte
4
@ jlp: Você precisa adicionar a tag do formulário à declaração height: 100%, caso contrário, ele quebrará o rodapé. Assim: html, body, form {height: 100%;} #
dazbradbury
Percebi que a adição de preenchimento ao rodapé estraga tudo, mas descobri que isso pode ser corrigido subtraindo o preenchimento extra no rodapé da altura {rodapé, empurrar}.
Nicooga 20/10/12
1
A explicação detalhada com o demo é fornecido neste local: CSS Fixo rodapé
mohitp
Ei, eu segui seus passos e funciona muito bem para páginas grandes. Mas em pequenas páginas em que o usuário não pode rolar o rodapé é um pouco longe demais. Portanto, torna uma página quase vazia rolável. Alguém sabe como consertar isso? Você pode ver minha página de teste aqui sheltered-escarpment-6887.herokuapp.com
Syk
1
@ Syk Descobri que reduzir a altura mínima ajuda. 94% é um valor
aceitável
84

Use unidades CSS vh!

Provavelmente, a maneira mais óbvia e não-hacky de percorrer um rodapé fixo seria usar as novas unidades de viewport 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 tem 80px de altura e o rodapé 40px de altura, podemos criar nosso rodapé fixo com uma única regra na div de conteúdo:

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

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

É isso aí.

... e veja como o mesmo código funciona com muito conteúdo na div content:

NB:

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

2) As versões antigas do IE (IE8-) e Android (4.4-) não suportam unidades de janela de visualização. ( caniuse )

3) Era uma vez um webkit com problemas nas 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ê quiser evitar o uso do calc por algum motivo, pode contornar isso usando margens negativas e preenchimento com o tamanho da caixa -

Igual a:

Danield
fonte
4
Essa é praticamente a melhor solução que eu já vi aqui, funcionou mesmo no meu caso estranho, com alguns conteúdos do conteúdo transbordando no rodapé para quem sabe o motivo. E eu acho que com sth como Sass e variáveis, poderia ser cada vez mais flexível.
precisa
1
De fato, este funciona como um encanto. Fácil de usar também para navegadores sem suporte.
Aramir
3
Como mexer com medidas absolutas ainda não é hacky? Na melhor das hipóteses é talvez menos hacky
Jonathan
Mas e se a altura do rodapé e do cabeçalho é medida em porcentagem e não px? Gosta de 15% da altura da página?
Fernanda Brum Lousada
3
Unidades janela de visualização nem sempre funcionam como esperado em navegadores móveis que bar como ocultar ou mostrar endereço, dependendo da posição de rolagem
Evgeny
57

Rodapé pegajoso com display: flex

Solução inspirada no rodapé de Philip Walton .

Explicação

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

  • Chrome ≥ 21.0
  • Firefox ≥ 20.0
  • Internet Explorer ≥ 10
  • Safari ≥ 6,1

É baseado na flexexibição , aproveitando a flex-growpropriedade, que permite que um elemento cresça em altura ou largura (quando flow-directiondefinido como um columnou rowrespectivamente), para ocupar o espaço extra no contêiner.

Vamos alavancar também a vhunidade, onde 1vhé definida como :

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

Portanto, uma altura 100vhé uma maneira concisa de dizer a um elemento para abranger toda a altura da janela de exibiçã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é cresça o suficiente 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 jogar com ele no JSFiddle .

Peculiaridades do Safari

Esteja ciente de que o Safari possui uma implementação incorreta da flex-shrinkpropriedade , 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ê precisará definir flex-shrinkexplicitamente a propriedade como 0 .contentcomo footerno exemplo acima:

.content { flex-shrink: 0; }
.footer  { flex-shrink: 0; }
gcedo
fonte
13
Eu sinto que esta é a resposta correta, já que é realmente a única abordagem que funciona mesmo quando a altura do rodapé não é conhecida.
fstanis
Isso atrapalha a grade com Neat 2
Halfacht 16/18
Mas por que não a solução de Philip Walton, por que um elemento "espaçador" extra?
YakovL
@YakovL In O .Site-contentelemento da solução de Walton desempenha o mesmo papel que spacer. É apenas chamado de forma diferente.
Gherman
@Gherman bem, .Site-contenttem um análogo .contentneste marcação .. mas deixa pra lá, eu perguntei para o caso gcedo tem alguma ideia concreta sobre isso, não há necessidade de adivinhar
YakovL
30

Você pode usar o position: absoluteseguinte para colocar o rodapé na parte inferior da página, mas verifique se as duas colunas têm o apropriado margin-bottompara que nunca sejam obstruídas pelo rodapé.

#footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
}
#content, #sidebar { 
    margin-bottom: 5em; 
}
Jimmy
fonte
Eu tentei isso com minha configuração semelhante (duas colunas + rodapé) e não funciona.
Isomorphismes
14
Ele se sobrepõe ao conteúdo se o conteúdo aumentar.
Satya Prakash
1
é por isso que o conteúdo tem a margem inferior. você deve configurá-lo para qualquer altura fixa que você criar no rodapé.
Jimmy
Pelo que vale a pena, se algo é um valor zero, não importa em que unidade de medida está, nada é nada, então todos os 0pxs em todas as folhas de estilo que vi devem ser justos 0.
Jonathan
e se a altura da página for maior que a altura da exibição ou o comprimento do rodapé do conteúdo for dinâmico? Veja minha resposta para solução deste problema.
Ravinder Payal
15

Aqui está uma solução com jQuery que funciona como um encanto. Ele verifica se a altura da janela é maior que a altura do corpo. Se for, 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 seu rodapé já tiver uma margem superior (de 50 pixels, por exemplo), será necessário alterar a última parte para:

css( 'margin-top', height_diff + 50 )
Sophivorus
fonte
Uma alternativa é adicionar uma div "empurrador" logo antes do rodapé. Em seguida, defina a altura do botão de pressão. Isso evita ter que lidar com margin-top existente
Salsaparrilha
Veja minha resposta para uma solução no-js.
ferit 20/04
11

Defina o CSS para #footer:

position: absolute;
bottom: 0;

Você precisará adicionar um paddingou marginà parte inferior do seu #sidebare, #contentpara coincidir com a altura #footerou quando eles se sobrepuserem, o #footercobrirá.

Além disso, se bem me lembro, o IE6 tem um problema com o bottom: 0CSS. Pode ser necessário usar uma solução JS para o IE6 (se você se importa com o IE6).

Raleigh Buckner
fonte
10
quando a janela é muito pequena, o rodapé aparece na frente do conteúdo com este css.
Seichi
1
Veja minha resposta @Seichi
ferit
6

Uma solução semelhante ao @gcedo, mas sem a necessidade de adicionar um conteúdo intermediário para empurrar o rodapé para baixo. Podemos simplesmente adicionar margin-top:autoao rodapé e ele será empurrado para a parte inferior da página, independentemente da altura ou 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>

Temani Afif
fonte
1
Outra abordagem seria dar .content flex: 1 0 auto;para torná-lo cultivável e não-shinkable, mas margin-top: auto;é um bom truque que envolve o rodapé de estilo, e não "não-relacionado", o .contentque é bom. Na verdade, eu me pergunto por que o Flex é necessário nesta abordagem ..
YakovL
@YakovL sim, a idéia principal aqui é o truque da margem superior;) Eu sei que posso criar o conteúdo assim, mas será quase o mesmo que uma resposta anterior, onde a idéia é empurrar o rodapé pelo conteúdo ... e aqui eu queria evitar isso e empurrar o rodapé apenas com margem;)
Temani Afif
O @YakovL flex é necessário para a margem: auto :) não podemos usá-lo sem ele ... como margin: auto se comporta um pouco diferente do item flex e depois bloqueia os itens. Se você remover display:flexnão vai funcionar, você terá um elemento de bloco fluxo normal
temanitas Afif
Sim, eu posso ver que ele não vai funcionar sem ele, mas eu não entendo por que (o que é "ligeiramente diferente")
YakovL
1
@YakovL é simples, usando o elemento de bloco normal, o fluxo é sempre uma direção de linha, portanto, apenas a margem direita / esquerda usada com auto funcionará (como o famoso margin:0 autoelemento central do bloco) MAS não temos nenhuma direção de coluna, portanto, não há margem automático com superior / inferior. O Flexbox possui a direção de linha / coluna;). Essa é a pequena diferença, mas a margem também é usada dentro do flexbox para alinhar o elemento. Assim, mesmo na direção de uma linha, você pode usar a margem superior / inferior automática para alinhar verticalmente. Você pode ler mais aqui: w3.org/TR/css- flexbox-1 / # auto-margins
Temani Afif
5

insira a descrição da imagem aqui

index.html:

<!DOCTYPE html>

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>

<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- all other page content -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>

</html>

main.css:

#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}

Fonte: https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/

ferit
fonte
2

Às vezes, lutei com isso e sempre achei que a solução com todas essas divs uma dentro da outra era uma solução confusa. Eu apenas brinquei um pouco com isso, e eu pessoalmente descobri que isso 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 sobre isso é que nenhum HTML extra precisa ser aplicado. Você pode simplesmente adicionar este CSS e depois escrever seu HTML como sempre

Daniel Alsaker
fonte
Isso funcionou comigo, porém adicionei width: 100% ao rodapé.
Victor.Uduak
2

Como a solução Grid ainda não foi apresentada, aqui está, com apenas duas declarações para o elemento pai , se tomarmos o height: 100%e margin: 0como 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 igualmente dentro do contêiner de alinhamento ao longo do eixo transversal. O espaçamento entre cada par de itens adjacentes é o mesmo. O primeiro item é nivelado com a borda inicial principal e o último item é nivelado com a borda final principal.

VXp
fonte
1

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 quando você procura um rodapé responsivo alinhado na parte inferior da página, que sempre mantém uma margem superior de 80% da altura da janela de exibição.

Ajith
fonte
1

Use o posicionamento absoluto e o índice z para criar uma div de rodapé permanente 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 divque agrupe o conteúdo do corpo composition: relative; min-height: 100%;
  • Adicione o preenchimento inferior ao conteúdo principal divigual à altura mais o preenchimento do rodapé
  • Defina o z-indexrodapé maior que o contêiner divse 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>

Paul Sweatte
fonte
1

Para esta pergunta, muitas das respostas que eu 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, em seguida, 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 :)

jjr2000
fonte
0

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

Pantera Cinza
fonte
0

Nenhuma dessas soluções css puras funciona corretamente com o redimensionamento dinâmico do conteúdo (pelo menos no firefox e Safari). Por exemplo, se você tiver um plano de fundo definido na div do contêiner, a página e redimensione (adicionando algumas linhas) a tabela dentro da div, o A tabela pode ficar na parte inferior da área estilizada, ou seja, você pode ter metade da tabela em branco sobre o tema preto e metade da tabela em branco completo, porque a cor da fonte e a cor de fundo são brancas. É basicamente impossível de fixar nas páginas do carrinho de compras.

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

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

obecalp
fonte
0

Várias pessoas colocaram a resposta para esse problema simples aqui, mas tenho uma coisa a acrescentar, considerando o quão frustrada 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 mensagens, presumivelmente porque geralmente é o padrão, é a posição: static na tag body. A posição relativa não funcionará!

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

Kyle Zimmer
fonte
0

Um tópico antigo que eu conheço, mas se você estiver procurando uma solução responsiva, essa adição ao 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});
}

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

user1235285
fonte
0

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, da área de trabalho para o tablet ou vice-versa, eles se sobrepõem ao conteúdo ou não ficam mais visíveis.

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

Edite a soluçã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 tamanho do seu conteúdo, colocaremos o rodapé fixo na parte inferior e, caso contrário, ele aparecerá automaticamente no final da exibição, conforme for necessário rolar para visualizá-lo.

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

Ravinder Payal
fonte
0

Eu não estava tendo sorte com as soluções sugeridas nesta página antes, mas finalmente este 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;
}
Cavalo rindo
fonte
0

Solução Flexbox

O layout flexível é preferido para alturas naturais de cabeçalho e rodapé. Essa solução flex é 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;
}
Reggie Pinkham
fonte
0

Para mim, a maneira mais legal de exibi-lo (o rodapé) é grudar no fundo, mas não cobrir o conteúdo o tempo todo:

#my_footer {
    position: static
    fixed; bottom: 0
}
Juan Isaza
fonte
1
Essa sintaxe está correta? A posição deve ser estática ou fixa?
Stealththeninja 18/11/19
0

jQuery CROSS BROWSER PLUGIN PERSONALIZADO - $ .footerBottom ()

Ou use o jQuery como eu e defina a altura do rodapé para autoou parafix , o que você quiser, funcionará de qualquer maneira. esse plug-in usa seletores jQuery, para que funcione, você precisará incluir a biblioteca jQuery no seu arquivo.

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

Quando você faz isso, tudo o 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 pronto para documento. Vai correr bem como está. Ele recalcula a posição do rodapé quando a página é carregada e quando a janela é redimensionada.

Aqui está o código do plugin que você não precisa entender. Apenas saiba como implementá-lo. Faz o trabalho para você. No entanto, se você quiser saber como ele funciona, basta ler o 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>

DevWL
fonte
O script java de baunilha é menos demorado que o plugin.
Ravinder Payal
0

As soluções flex funcionaram para mim na medida em que o rodapé fica grudento, mas, infelizmente, mudar o corpo para usar o layout flexível fez com que alguns 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 obtive isso da resposta do ctf0 em https://css-tricks.com/couple-takes-sticky-footer/

Roger
fonte
0

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>

antelove
fonte
0

Se você não quiser usar a posição fixa e segui-lo irritantemente no celular, isso parece estar funcionando para mim até agora.

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

#site-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 6px 2px;
    background: #32383e;
}

Basta definir o html para min-height: 100%;e position: relative;, position: absolute; bottom: 0; left: 0;em seguida, no rodapé. Depois, verifiquei se o rodapé era o último elemento do corpo.

Deixe-me saber se isso não funciona para mais ninguém e por quê. Eu sei que esses hacks de estilo tedioso podem se comportar estranhamente em várias circunstâncias em que eu não tinha pensado.

kiko carisse
fonte
-1

Tente colocar uma div de contêiner (com estouro: automático) ao redor do conteúdo e da barra lateral.

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

John Sheehan
fonte