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.

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 */
}

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í.

* {
    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 veja como o mesmo código funciona com muito conteúdo na div content:

* {
    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>

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:

* {
    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 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; }

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; 
}

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 )

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).

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>

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/

À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

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>

• align-content: space-between

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.

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.

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>

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 :)

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

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).

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.

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/

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.

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;
}

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;
}

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
}

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>

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/

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.

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?