Ho un semplice layout a 2 colonne con un piè di pagina che cancella sia il div destro che sinistro nel mio markup. Il mio problema è che non riesco a mantenere il piè di pagina in fondo alla pagina in tutti i browser. Funziona se il contenuto abbassa il piè di pagina, ma non è sempre così.

Per ottenere un piè di pagina appiccicoso:

1. Avere una <div>con class="wrapper"i tuoi contenuti.

2. Proprio prima della chiusura </div>del wrapperluogo il <div class="push"></div>.

3. Subito dopo la chiusura </div>del wrapperluogo il <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 le unità vh CSS!

Probabilmente il modo più ovvio e non complicato di fare un footer appiccicoso sarebbe quello di utilizzare le nuove unità di visualizzazione CSS .

Prendiamo ad esempio il seguente semplice markup:

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

Se l'intestazione è alta 80px e il piè di pagina è alto 40px, allora possiamo creare il nostro piè di pagina appiccicoso con una sola regola sul div del contenuto:

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

Il che significa: lascia che l'altezza del div contenuto sia almeno 100% dell'altezza del viewport meno le altezze combinate di intestazione e piè di pagina.

Questo è tutto.

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

... ed ecco come funziona lo stesso codice con molti contenuti nel div contenuto:

* {
    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) L'altezza dell'intestazione e del piè di pagina deve essere nota

2) Le vecchie versioni di IE (IE8-) e Android (4.4-) non supportano le unità viewport. ( caniuse )

3) C'era una volta il webkit aveva un problema con le unità viewport all'interno di una regola di calc. Questo è stato effettivamente risolto ( vedi qui ) quindi non ci sono problemi. Tuttavia, se stai cercando di evitare l'uso di calc per qualche motivo, puoi aggirare il problema usando i margini negativi e il riempimento con il ridimensionamento della casella:

Così:

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

Piè di pagina appiccicoso con display: flex

Soluzione ispirata al footer appiccicoso di Philip Walton .

Spiegazione

Questa soluzione è valida solo per :

• Chrome ≥ 21,0
• Firefox ≥ 20.0
• Internet Explorer ≥ 10
• Safari ≥ 6.1

Si basa sul flexdisplay , sfruttando la flex-growproprietà, che consente a un elemento di crescere in altezza o larghezza (quando flow-directionè impostato su columnorow rispettivamente), per occupare lo spazio aggiuntivo nel contenitore.

Faremo leva anche vhsull'unità, dove 1vhè definita come :

1/100 dell'altezza della finestra

Pertanto un'altezza 100vhè un modo conciso per dire a un elemento di coprire l'intera altezza della finestra.

Ecco come struttureresti la tua pagina web:

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

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

Per fare in modo che il piè di pagina rimanga nella parte inferiore della pagina, si desidera che lo spazio tra il corpo e il piè di pagina cresca tanto quanto serve per spingere il piè di pagina nella parte inferiore della pagina.

Pertanto il nostro layout diventa:

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

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

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

Implementazione

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>

Puoi giocarci su JSFiddle .

Stranezze di Safari

Tieni presente che Safari ha un'implementazione errata della flex-shrinkproprietà , che consente agli articoli di ridursi più dell'altezza minima necessaria per visualizzare il contenuto. Per risolvere questo problema si dovrà impostare la flex-shrinkproprietà in modo esplicito a 0 per l' .contente footernell'esempio di cui sopra:

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

Puoi usare il position: absoluteseguito per posizionare il piè di pagina nella parte inferiore della pagina, ma assicurati che le tue 2 colonne siano appropriate in margin-bottommodo che non vengano mai occluse dal piè di pagina.

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

Ecco una soluzione con jQuery che funziona come un fascino. Verifica se l'altezza della finestra è maggiore dell'altezza del corpo. Se lo è, cambia la margine superiore del piè di pagina per compensare. Testato su Firefox, Chrome, Safari e Opera.

$( function () {

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

});

Se il piè di pagina ha già un margine superiore (ad esempio di 50 pixel), sarà necessario modificare l'ultima parte per:

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

Impostare il CSS per il #footera:

position: absolute;
bottom: 0;

Sarà quindi necessario aggiungere un paddingo marginalla parte inferiore del tuo #sidebare #contentper abbinare l'altezza di #footero quando si sovrappongono, #footerli copriranno.

Inoltre, se ricordo bene, IE6 ha un problema con il bottom: 0CSS. Potrebbe essere necessario utilizzare una soluzione JS per IE6 (se ti interessa IE6).

Una soluzione simile a @gcedo ma senza la necessità di aggiungere un contenuto intermedio per ridurre il piè di pagina. Possiamo semplicemente aggiungere margin-top:autoil piè di pagina e verrà spinto in fondo alla pagina indipendentemente dalla sua altezza o dall'altezza del contenuto sopra.

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/

A volte ho avuto difficoltà con questo e ho sempre scoperto che la soluzione con tutti quei div l'uno nell'altro era una soluzione disordinata. Ho appena fatto un po 'di confusione, e ho scoperto personalmente che funziona e sicuramente è uno dei modi più semplici:

html {
    position: relative;
}

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

footer {
    position: absolute;
    bottom: 0;
}

Quello che mi piace di questo è che non è necessario applicare HTML aggiuntivo. Puoi semplicemente aggiungere questo CSS e quindi scrivere il tuo HTML come ogni volta

Dal momento che la griglia soluzione non è stata ancora presentata, eccolo, con solo due dichiarazioni per l' elemento genitore , se prendiamo il height: 100%e margin: 0per scontata:

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

Gli articoli sono distribuiti uniformemente all'interno del contenitore di allineamento lungo l'asse trasversale. La distanza tra ogni coppia di oggetti adiacenti è la stessa. Il primo elemento è allineato con il bordo di inizio principale e l'ultimo è allineato con il bordo di fine principale.

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>

Questo dovrebbe fare il trucco se stai cercando un piè di pagina reattivo allineato nella parte inferiore della pagina, che mantiene sempre un margine superiore dell'80% dell'altezza della finestra.

Utilizzare il posizionamento assoluto e l'indice z per creare un div footer appiccicoso a qualsiasi risoluzione, attenendosi alla seguente procedura:

• Crea un div footer con position: absolute; bottom: 0;e l'altezza desiderata
• Imposta il riempimento del piè di pagina per aggiungere spazi bianchi tra la parte inferiore del contenuto e la parte inferiore della finestra
• Crea un contenitore con divcui avvolgere il contenuto del corpoposition: relative; min-height: 100%;
• Aggiungi imbottitura inferiore al contenuto principale divuguale all'altezza più imbottitura del piè di pagina
• Impostare il z-indexpiè di pagina maggiore del contenitore divse il piè di pagina è tagliato

Ecco un esempio:

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

Per questa domanda molte delle risposte che ho visto sono goffe, difficili da implementare e inefficienti, quindi ho pensato di fare un tentativo e trovare la mia soluzione che è solo un po 'di 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>

funziona impostando l'altezza del piè di pagina e quindi usando css calc per calcolare l'altezza minima della pagina con il piè di pagina ancora in fondo, spero che questo aiuti alcune persone :)

Una soluzione sarebbe quella di impostare l'altezza minima per le scatole. Sfortunatamente sembra che non sia ben supportato da IE (sorpresa).

Nessuna di queste soluzioni css pure funziona correttamente con il ridimensionamento dinamico del contenuto (almeno su Firefox e Safari), ad esempio, se hai un background impostato sul div contenitore, la pagina e quindi ridimensiona (aggiungendo alcune righe) all'interno del div, il la tabella può sporgere dalla parte inferiore dell'area stilizzata, vale a dire che è possibile che metà della tabella sia in bianco sul tema nero e metà della tabella sia completamente bianca poiché sia ​​il colore del carattere che il colore di sfondo sono bianchi. Fondamentalmente non è risolvibile con le pagine themeroller.

Il layout a più colonne div nidificato è un brutto hack e il div body / container al 100% di altezza minima per attaccare il piè di pagina è un brutto hack.

L'unica soluzione nessuna script che funziona su tutti i browser che ho provato: una tabella molto più semplice / più corta con thead (per intestazione) / tfoot (per piè di pagina) / tbody (td per qualsiasi numero di colonne) e altezza al 100%. Ma questo ha percepito svantaggi semantici e SEO (il piede deve apparire davanti al corpo. I ruoli di ARIA possono aiutare i motori di ricerca decenti).

Molte persone hanno messo la risposta a questo semplice problema qui, ma ho una cosa da aggiungere, considerando quanto ero frustrato fino a quando non ho capito cosa stavo sbagliando.

Come accennato, il modo più semplice per farlo è così ...

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

Tuttavia, la proprietà non menzionata nei post, presumibilmente perché di solito è predefinita, è la posizione: statica sul tag body. La posizione relativa non funzionerà!

Il mio tema wordpress aveva ignorato la visualizzazione predefinita del corpo e mi ha confuso per un tempo odiosamente lungo.

Un vecchio thread lo so, ma se stai cercando una soluzione reattiva, questa aggiunta jQuery ti aiuterà:

$(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 guida completa è disponibile qui: https://pixeldesigns.co.uk/blog/responsive-jquery-sticky-footer/

Ho creato una libreria molto semplice https://github.com/ravinderpayal/FooterJS

È molto semplice da usare. Dopo aver incluso la libreria, basta chiamare questa riga di codice.

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

I piè di pagina possono essere modificati in modo dinamico richiamando la funzione sopra con parametro / ID diversi.

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

Nota: - Non è necessario modificare o aggiungere alcun CSS. La libreria è dinamica, il che implica che anche se lo schermo viene ridimensionato dopo aver caricato la pagina, ripristinerà la posizione del piè di pagina. Ho creato questa libreria, perché i CSS risolvono il problema per un po 'ma quando le dimensioni dello schermo cambiano in modo significativo, dal desktop al tablet o viceversa, si sovrappongono al contenuto o non rimangono più appiccicosi.

Un'altra soluzione sono le query multimediali CSS, ma è necessario scrivere manualmente diversi stili CSS per dimensioni diverse degli schermi mentre questa libreria funziona automaticamente ed è supportata da tutti i browser di supporto JavaScript di base.

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

Ora, se l'altezza della visualizzazione è superiore alla lunghezza del contenuto, renderemo il piè di pagina fissato in basso e, in caso contrario, verrà visualizzato automaticamente alla fine della visualizzazione poiché è necessario scorrere per visualizzarlo.

E, sembra una soluzione migliore di quella JavaScript / libreria.

Non ho avuto fortuna con le soluzioni suggerite in questa pagina prima ma poi finalmente, questo piccolo trucco ha funzionato. Lo includerò come un'altra possibile soluzione.

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

Soluzione Flexbox

Il layout flessibile è preferito per le altezze naturali di intestazione e piè di pagina. Questa soluzione flessibile è testata nei browser moderni e funziona davvero :) in IE11.

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

Per me il modo migliore per visualizzarlo (il piè di pagina) è quello di rimanere in fondo ma non coprire i contenuti per tutto il tempo:

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

jQuery CROSS BROWSER CUSTOM PLUGIN - $ .footerBottom ()

Oppure usa jQuery come faccio io e imposta l'altezza del piè di pagina su autoo su fix, qualunque cosa tu voglia, funzionerà comunque. questo plugin usa i selettori jQuery quindi per farlo funzionare, dovrai includere la libreria jQuery nel tuo file.

Ecco come si esegue il plug-in. Importa jQuery, copia il codice di questo plugin jQuery personalizzato e importalo dopo aver importato jQuery! È molto semplice ed essenziale, ma importante.

Quando lo fai, tutto ciò che devi fare è eseguire questo codice:

$.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"}

non è necessario inserirlo all'interno dell'evento pronto per il documento. Funzionerà bene così com'è. Ricalcola la posizione del piè di pagina quando la pagina viene caricata e quando la finestra viene ridimensionata.

Ecco il codice del plugin che non devi capire. So solo come implementarlo. Fa il lavoro per te. Tuttavia, se ti piace sapere come funziona, basta guardare il codice. Ho lasciato commenti per te.

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

Le soluzioni flessibili hanno funzionato per me fino a rendere appiccicoso il piè di pagina, ma sfortunatamente cambiando il corpo per usare il layout flessibile ha fatto cambiare alcuni dei nostri layout di pagina, e non per il meglio. Ciò che alla fine ha funzionato per me è stato:

    jQuery(document).ready(function() {

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

});

Ho preso questo dalla risposta di ctf0 a https://css-tricks.com/couple-takes-sticky-footer/

Se non lo vuoi usando la posizione fissa e seguendoti fastidiosamente su dispositivo mobile, questo sembra funzionare finora per me.

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

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

Basta impostare l'html su min-height: 100%;e position: relative;, quindi position: absolute; bottom: 0; left: 0;sul piè di pagina. Mi sono quindi assicurato che il piè di pagina fosse l'ultimo elemento del corpo.

Fammi sapere se questo non funziona per nessun altro e perché. So che questi noiosi hack di stile possono comportarsi in modo strano tra varie circostanze a cui non avevo pensato.

Prova a inserire un div contenitore (con overflow: auto) attorno al contenuto e alla barra laterale.

Se il problema persiste, hai screenshot o collegamenti di esempio in cui il piè di pagina non viene visualizzato correttamente?