Sticky Footer: come posizionare il footer in fondo alla pagina?

È da un po’ di tempo che non mi si legge qui sui lidi di Your Inspiration Web, ma eccomi ritornare con un nuovo articolo decisamente utile a tutti i web designer!

Vi è mai capitato di aver sviluppato un sito bellissimo, con perfetti abbinamenti di colori, font armoniosi, contenuti accattivanti, ma… quella pagina contatti è troppo corta! Il footer si posiziona al centro della pagina e rovina tutto.

Oggi vi mostrerò come posizionare il footer del vostro sito sempre in fondo alla pagina in 2 casi diversi e con approcci diversi, di cui uno anche per WordPress.

Primo caso: footer ad altezza conosciuta posizionato via CSS

Il primo caso è sicuramente il più semplice. Tutto viene fatto tramite CSS e HTML. L’unico limite è che bisogna conoscere a priori l’altezza del footer.
Diamo un’occhiata al codice insieme.

Per prima cosa, supponiamo di avere il seguente HTML:

<div id="container">
  <div id="header">HEADER</div>
  <div id="content">CONTENT</div>
  <div id="sidebar">SIDEBAR</div>
  <div id="push"></div>
</div>
<div id="footer">FOOTER</div>

Come puoi vedere, il codice HTML è estremamente semplice (anche per motivi didattici ovviamente, puoi notare che ho omesso i tag html, body ed head).
Sicuramente hai già notato che ho inserito un div #push.
Questo sarà uno degli elementi chiave per poter creare il tuo sticky footer.

Andiamo avanti ed esaminiamo il codice CSS

html, body {
  height: 100%;
}
#container {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -50px;
}
#footer, #push {
    height: 50px;
    clear: both;
}

Come puoi vedere, ho impostato l’altezza di body ed html a 100%, così come anche per il div #container. Il codice è compatibile con tutti i browser, compreso IE6 (eh si… anche IE6).

L’ultima regola, invece, assegna un margine negativo di 50px al container. I 50px negativi devono corrispondere con l’altezza del footer, che nel nostro caso sarà di 50px, infatti lo puoi notare nelle ultime regole assegnate a #footer e #push.

Questo è tutto. Il tuo footer ora verrà posizionato sempre in fondo alla pagina, anche nel caso di contenuti ad altezza ridotta.

Secondo caso: footer ad altezza sconosciuta posizionato via Javascript.

Il secondo caso prevede un footer di cui non conosciamo già l’altezza.

Fortunatamente, c’è un plugin per jQuery che fa proprio al caso nostro. Nell’esempio c’è una mia piccola aggiunta per risolvere un problema dell’admin bar su WordPress, la quale contribuisce allo spostamento del footer.
L’HTML non ci interessa analizzarlo in questo caso perché non é importante quale usiamo. Passiamo direttamente al plugin jQuery.

// sticky footer plugin
(function($){
  var footer;
  $.fn.extend({
    stickyFooter: function(options) {
      footer = this;
      positionFooter();
      $(window)
      	.on('sticky', positionFooter)
        .scroll(positionFooter)
        .resize(positionFooter);
      function positionFooter() {
        var docHeight = $(document.body).height() - $("#sticky-footer-push").height();
        if(docHeight < $(window).height()){
          var diff = $(window).height() - docHeight;
          if (!$("#sticky-footer-push").length > 0) {
            $(footer).before('<div id="sticky-footer-push"></div>');
          }
          if( $('#wpadminbar').length > 0 ) {
            diff -= 28;
          }
          $("#sticky-footer-push").height(diff);
        }
      }
    }
  });
  $(‘#footer’).stickyFooter();
})(jQuery);

Qui ho utilizzato un codice leggermente differente. Prima come ricordi, ho impostato l’altezza del footer, in questo caso invece non mi serve conoscerla a priori. Tramite jQuery posso ricavare l’altezza del footer con una sola funzione e posizionarlo in fondo alla pagina con altre poche istruzioni.

Nota che il codice necessario a spostare il footer, viene eseguito solo nel caso l’altezza del contenuto sia minore dell’altezza della finestra. Nel secondo caso, non sarebbe necessario spostarlo poichè si troverebbe già in fondo alla pagina.

Conclusioni

Ora hai a disposizioni i principali esempi per poter creare il tuo sticky footer in ogni caso.
Stai creando un sito statico? Usa lo sticky footer creato con CSS  ad altezza fissa.
Stai utilizzando WordPress o non sai a priori l’altezza del footer? Utilizza uno sticky footer in Javascript. Problema risolto.

E tu hai mai avuto l’esigenza di usare uno sticky footer?
Conosci altri metodi? Cosa preferisci utilizzare?

Tag: , , ,

L'autore

Sviluppo per il web da alcuni anni. Ultimamente mi sono specializzato in WordPress tramite Your Inspiration, con il quale attualmente lavoro nell'area di supporto clienti e sviluppo temi e plugin per WP.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

27 commenti

Trackback e pingback

  1. Sticky Footer: come posizionare il footer in fondo alla pagina? | AWD CopywritingBlog
    […] Sticky Footer: come posizionare il footer in fondo alla pagina? è un articolo di Your Inspiration Web […]