Tengo un diseño simple de 2 columnas con un pie de página que borra el div derecho e izquierdo en mi marcado. Mi problema es que no puedo hacer que el pie de página permanezca en la parte inferior de la página en todos los navegadores. Funciona si el contenido empuja el pie de página, pero ese no es siempre el caso.

Para obtener un pie de página adhesivo:

1. Tener un <div>con class="wrapper"su contenido.

2. Justo antes del cierre </div>del wrapperlugar el <div class="push"></div>.

3. Justo después del cierre </div>del wrapperlugar, el <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 */
}

¡Usa unidades CSS vh!

Probablemente, la forma más obvia y no hacky de hacer un pie de página pegajoso sería utilizar las nuevas unidades de ventana de visualización CSS .

Tomemos por ejemplo el siguiente marcado simple:

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

Si el encabezado tiene 80px de alto y el pie de página tiene 40px de alto, entonces podemos hacer nuestro pie de página adhesivo con una sola regla en el contenido div:

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

Lo que significa: deje que la altura de la división de contenido sea al menos el 100% de la altura de la vista menos las alturas combinadas del encabezado y pie de página.

Eso es.

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

... y así es como funciona el mismo código con mucho contenido en el div de contenido:

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

NÓTESE BIEN:

1) Se debe conocer la altura del encabezado y pie de página

2) Las versiones anteriores de IE (IE8-) y Android (4.4-) no son compatibles con las unidades de ventana gráfica. ( caniuse )

3) Érase una vez que webkit tenía un problema con las unidades de ventana gráfica dentro de una regla de cálculo. De hecho, esto se ha solucionado ( ver aquí ) para que no haya ningún problema allí. Sin embargo, si está buscando evitar el uso de calc por alguna razón, puede evitarlo usando márgenes negativos y relleno con tamaño de caja:

Al igual que:

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

Pie de página adhesivo con display: flex

Solución inspirada en el pie de página adhesivo de Philip Walton .

Explicación

Esta solución es válida solo para :

• Chrome ≥ 21.0
• Firefox ≥ 20.0
• Internet Explorer ≥ 10
• Safari ≥ 6.1

Se basa en la flexpantalla , aprovechando la flex-growpropiedad, que permite que un elemento crezca en altura o anchura (cuando flow-directionse establece en cualquiera columno rowrespectivamente), para ocupar el espacio adicional en el contenedor.

Vamos a aprovechar también la vhunidad, donde 1vhse define como :

1/100 de la altura de la ventana gráfica

Por lo tanto, su altura 100vhes una forma concisa de decirle a un elemento que abarque la altura de la ventana gráfica completa.

Así es como estructuraría su página web:

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

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

Para que el pie de página se pegue en la parte inferior de la página, desea que el espacio entre el cuerpo y el pie de página crezca tanto como sea necesario para empujar el pie de página en la parte inferior de la página.

Por lo tanto, nuestro diseño se convierte en:

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

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

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

Implementación

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>

Puedes jugar con él en el JSFiddle .

Caprichos del safari

Tenga en cuenta que Safari tiene una implementación defectuosa de la flex-shrinkpropiedad , que permite que los elementos se reduzcan más de la altura mínima que se requeriría para mostrar el contenido. Para solucionar este problema, deberá establecer la flex-shrinkpropiedad explícitamente en 0 en .contenty footeren el ejemplo anterior:

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

Puede usar el position: absolutesiguiente para colocar el pie de página en la parte inferior de la página, pero luego asegúrese de que sus 2 columnas tengan el apropiado margin-bottompara que el pie de página nunca las ocluya.

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

Aquí hay una solución con jQuery que funciona como un encanto. Comprueba si la altura de la ventana es mayor que la altura del cuerpo. Si es así, cambia el margen superior del pie de página para compensar. Probado en Firefox, Chrome, Safari y Opera.

$( function () {

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

});

Si su pie de página ya tiene un margen superior (de 50 píxeles, por ejemplo), deberá cambiar la última parte para:

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

Establezca el CSS para #footer:

position: absolute;
bottom: 0;

A continuación, deberá agregar una paddingo marginen la parte inferior de su #sidebary #contentpara que coincida con la altura de #footero cuando se superponen, el#footer cubrirá.

Además, si no recuerdo mal, IE6 tiene un problema con el bottom: 0CSS. Puede que tenga que usar una solución JS para IE6 (si le importa IE6).

Una solución similar a @gcedo pero sin la necesidad de agregar un contenido intermedio para empujar el pie de página hacia abajo. Simplemente podemos agregar margin-top:autoal pie de página y será empujado al final de la página, independientemente de su altura o la altura del contenido anterior.

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

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

A veces tuve problemas con esto y siempre encontré que la solución con todos esos div dentro de cada uno era una solución desordenada. Simplemente lo jugué un poco, y personalmente descubrí que esto funciona y ciertamente es una de las formas más simples:

html {
    position: relative;
}

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

footer {
    position: absolute;
    bottom: 0;
}

Lo que me gusta de esto es que no es necesario aplicar HTML adicional. Simplemente puede agregar este CSS y luego escribir su HTML como siempre

Dado que la solución Grid aún no se ha presentado, aquí está, con solo dos declaraciones para el elemento padre , si damos por sentado el height: 100%y margin: 0:

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

Los artículos se distribuyen uniformemente dentro del contenedor de alineación a lo largo del eje transversal. El espacio entre cada par de elementos adyacentes es el mismo. El primer elemento está al ras con el borde de inicio principal, y el último elemento está al ras con el borde del extremo 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>

Esto debería ser útil si está buscando un pie de página sensible alineado en la parte inferior de la página, que siempre mantiene un margen superior del 80% de la altura de la ventana gráfica.

Use el posicionamiento absoluto y el índice z para crear un div de pie de página fijo en cualquier resolución utilizando los siguientes pasos:

• Crear un div de pie de página con position: absolute; bottom: 0; y la altura deseada
• Establezca el relleno del pie de página para agregar espacios en blanco entre la parte inferior del contenido y la parte inferior de la ventana
• Cree un contenedor divque envuelva el contenido del cuerpo conposition: relative; min-height: 100%;
• Agregar relleno inferior al contenido principal div que sea igual a la altura más el relleno del pie de página
• Establezca el z-indexpie de página más grande que el contenedor divsi el pie de página está recortado

Aquí hay un ejemplo:

    <!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 pregunta, muchas de las respuestas que he visto son torpes, difíciles de implementar e ineficientes, así que pensé en intentarlo y encontrar mi propia solución, que es solo un poco de CSS y 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>

esto funciona estableciendo la altura del pie de página y luego usando css calc para calcular la altura mínima que puede tener la página con el pie de página todavía en la parte inferior, espero que esto ayude a algunas personas :)

Una solución sería establecer la altura mínima para las cajas. Desafortunadamente, parece que IE no lo admite bien (sorpresa).

Ninguna de estas soluciones css puras funciona correctamente con el cambio de tamaño dinámico del contenido (al menos en Firefox y Safari), por ejemplo, si tiene un fondo establecido en el contenedor div, la página y luego cambia el tamaño (agregando algunas filas) a la tabla dentro del div, el la tabla puede sobresalir de la parte inferior del área con estilo, es decir, puede tener la mitad de la tabla en blanco sobre el tema negro y la mitad de la tabla completa en blanco porque tanto el color de fuente como el color de fondo son blancos. Básicamente no se puede arreglar con las páginas de Themeroller.

El diseño de varias columnas de div anidado es un truco feo y el div de cuerpo / contenedor de altura mínima del 100% para el pie de página pegado es un truco más feo.

La única solución sin script que funciona en todos los navegadores que he probado: una tabla mucho más simple / corta con thead (para encabezado) / tfoot (para pie de página) / tbody (td para cualquier número de columnas) y 100% de altura. Pero esto ha percibido desventajas semánticas y de SEO (tfoot debe aparecer antes que tbody. Sin embargo, los roles ARIA pueden ayudar a los motores de búsqueda decentes).

Varias personas han puesto la respuesta a este simple problema aquí, pero tengo una cosa que agregar, considerando lo frustrado que estaba hasta que descubrí lo que estaba haciendo mal.

Como se mencionó, la forma más sencilla de hacerlo es así ...

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

Sin embargo, la propiedad no mencionada en las publicaciones, presumiblemente porque generalmente es predeterminada, es la posición: estática en la etiqueta del cuerpo. Posición relativa no funcionará!

Mi tema de WordPress había anulado la pantalla predeterminada del cuerpo y me confundió durante un tiempo desagradablemente largo.

Un viejo hilo que conozco, pero si está buscando una solución receptiva, esta adición de jQuery ayudará a:

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

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

La guía completa se puede encontrar aquí: https://pixeldesigns.co.uk/blog/responsive-jquery-sticky-footer/

He creado una biblioteca muy simple https://github.com/ravinderpayal/FooterJS

Es muy simple de usar. Después de incluir la biblioteca, simplemente llame a esta línea de código.

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

Los pies de página se pueden cambiar dinámicamente al recuperar la función anterior con diferentes parámetros / id.

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

Nota: - No tiene que alterar ni agregar ningún CSS. La biblioteca es dinámica, lo que implica que incluso si se cambia el tamaño de la pantalla después de cargar la página, restablecerá la posición del pie de página. He creado esta biblioteca, porque CSS resuelve el problema por un tiempo, pero cuando el tamaño de la pantalla cambia significativamente, desde el escritorio a la tableta o viceversa, se superponen al contenido o ya no permanecen fijos.

Otra solución son las Consultas de medios CSS, pero debe escribir manualmente diferentes estilos CSS para diferentes tamaños de pantallas, mientras que esta biblioteca hace su trabajo automáticamente y es compatible con todos los navegadores básicos compatibles con JavaScript.

Editar solución 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;
    }
}

Ahora, si la altura de la pantalla es mayor que la longitud de su contenido, haremos que el pie de página se fije en la parte inferior y, de lo contrario, aparecerá automáticamente al final de la pantalla, ya que debe desplazarse para ver esto.

Y, parece una mejor solución que JavaScript / biblioteca uno.

No tenía suerte con las soluciones sugeridas en esta página antes, pero finalmente, este pequeño truco funcionó. Lo incluiré como otra posible solución.

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

Solución Flexbox

Se prefiere el diseño flexible para las alturas naturales de encabezado y pie de página. Esta solución flexible se prueba en navegadores modernos y realmente funciona :) en IE11.

Ver 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 mí, la mejor manera de mostrarlo (el pie de página) es pegarse al final pero no cubrir el contenido todo el tiempo:

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

jQuery CROSS BROWSER PLUGIN PERSONALIZADO - $ .footerBottom ()

O use jQuery como lo hago yo, y configure la altura de su pie de página en autoo parafix lo que quiera, funcionará de todos modos. este complemento utiliza selectores jQuery, por lo que para que funcione, deberá incluir la biblioteca jQuery en su archivo.

Así es como ejecuta el complemento. ¡Importe jQuery, copie el código de este complemento jQuery personalizado e impórtelo después de importar jQuery! Es muy simple y básico, pero importante.

Cuando lo haces, todo lo que tienes que hacer es ejecutar 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"}

no es necesario colocarlo dentro del evento de documento listo. Funcionará bien como está. Volverá a calcular la posición de su pie de página cuando se cargue la página y cuando la ventana cambie de tamaño.

Aquí está el código del complemento que no tiene que entender. Solo sé cómo implementarlo. Hace el trabajo por ti. Sin embargo, si desea saber cómo funciona, solo mire el código. Te dejé comentarios.

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

Las soluciones flexibles funcionaron para mí en lo que respecta a hacer que el pie de página sea adhesivo, pero desafortunadamente cambiar el cuerpo para usar el diseño flexible hizo que algunos de nuestros diseños de página cambiaran, y no para mejor. Lo que finalmente funcionó para mí fue:

    jQuery(document).ready(function() {

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

});

Obtuve esto de la respuesta de ctf0 en https://css-tricks.com/couple-takes-sticky-footer/

Si no quieres usar la posición fija y seguirte de forma molesta en el móvil, esto parece estar funcionando para mí hasta ahora.

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

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

Simplemente configure el html en min-height: 100%;y position: relative;, luego, position: absolute; bottom: 0; left: 0;en el pie de página. Luego me aseguré de que el pie de página fuera el último elemento del cuerpo.

Avíseme si esto no funciona para nadie más y por qué. Sé que estos trucos de estilo tedioso pueden comportarse de manera extraña entre varias circunstancias en las que no había pensado.

Intente colocar un contenedor div (con overflow: auto) alrededor del contenido y la barra lateral.

Si eso no funciona, ¿tiene capturas de pantalla o enlaces de ejemplo donde el pie de página no se muestra correctamente?