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?
L'autore
27 commenti
Trackback e pingback
-
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 […]
Personalmente applico sempre il primo metodo, usare il javascript per elementi essenziali non mi è mai piaciuto: e chi li tiene disattivati?
Si concordo, ma ad esempio su WP, come fai ad usare il CSS? É impossibile sapere l’altezza della pagina, specie se il tema non lo devi utilizzare tu.
Comunque ti posso assicurare che il metodo Javascript funziona alla perfezione.
Chi ha JS disattivato purtroppo non vedrebbe lo stickyFooter. Anche se attualmente é difficile trovare qualcuno che ce l’abbia disattivato. Altrimenti potresti provare una combinazione delle due cose e attivare quella CSS solo se il JS é disabilitato.
Ciao, molto interessante!
Io m sono trovato molto bene con un altra soluzione in css che devo dire mi ha risolto non poche grane.
L’ho trovata su questo sito, ed posiziona il footer a fine pagina facendolo spingere dal box dei contenuti!
http://www.extrowebsite.com/articoli-css/posizionare-il-footer-in-maniera-assoluta-con-i-css.html
P.S. non sto facendo pubblicità ad un mio blog ma solo ad una soluzione che ho trovato online, e che potrebbe essere utile.
Ciao, grazie!
Sinceramente la tua soluzione non mi piace. Posiziona il footer in modo assoluto. Questo implica che il resto del contenitore puó nascondersi dietro il footer, a meno che non ci vai a mettere tu del codice, magari un margine etc. per non permettere questo.
Personalmente preferisco altri metodi. Ma é comunque una soluzione! In alcuni casi potrebbe tornare utile!
Ciao Nicola, posso chiederti comunque di indicare brevemente il codice html per il secondo caso? non ho ben capito come posizionare nell’html il
Ciao Paolo,
l’HTML del primo esempio va benissimo. Elimina soltanto il div #push che nel secondo caso diventa superfluo.
Spero di non passare per provocatore o cattivo utente, ma il primo metodo ok, nulla da dire ma il secondo metodo non ha senso.
Forse sono troppo “vecchio stile” e sarà che non amo usare jquery, che uso poche volte e solo all’occorrenza, ma perché usare javascript per allineare il footer o comunque per lavori che dovrebbe fare il css?
Perché rallentare (anche se di poco) il caricamento della pagina per fare qualcosa che posso fare tranquillamente col css, con tempi immediati e senza il rischio di errori di programmazione?
Insomma: perché complicarsi la vita? non ne vedo il senso
Ciao Claudio,
semplicemente perché da CSS non si puó fare.
Prendi ad esempio un tema WordPress che devi vendere a X utenti.
Come fai a sapere che il footer é di esattamente 100px?
Magari l’utente Pinco ci mette solo il testo del copyright, mentre Pallino ci inserisce anche dei widget con menú, immagini e ultimi tweet. L’altezza cambia di molto e tu non puoi sapere quanto sia esattamente.
In questo caso devi farlo tramite Javascript.
Sono sempre io, quello del commento n7, volevo rispondere a Nicola al commento 8:
Non è vero che con il css non lo puoi fare, basta non dare un altezza fissa al div ma lasciare che si possa allargare
esempio veloce css:
div#footer {
min-height:100px;
width:100%;
padding-bottom:10px;
}
In questo modo quando il contenuto è piccolo (es solo una frase) gli viene impostato con altezza 100 px quando il contenuto è maggiore il div si allarga.
Scusa ma questo è abc del CSS non dirmi che non lo sai, se no non ho capito esempio che riporti.
correggo: alto 110 (100 + 10 di padding) va beh penso di essermi nel esempio eheh
Ciao Claudio, ho appena provato il tuo codice. Se é solo quello, non funziona. Preciso che ho anche aggiunto il resto del mio codice, omettendo la parte del margine negativo e del #push.
Puoi darmi un codice piú preciso?
Io ne ho provate molte quando mi trovai nella situazione di doverlo usare, e ti confesso che non ho mai trovato niente che funzionasse. Magari qualcosa mi é sfuggito, sei libero di smentirmi :)
Sempre io:
No ok ho riletto il codice e ho capito che stiamo parlando di due esempi diversi eheh, tu hai in mente il layout di un tipo e io di un altro, errore mio lo ammetto.
In pratica vuoi fare sempre in modo che #container sia sempre largo tutta pagina meno l’area del footer,(probabilmente vuoi evitare lo scroller verticale),mentre io davo per scontato che la pagina potesse scrollare verticamente, ora ho capito perchè usi jquery.
Però mi sorge una domanda: e se c’è molto testo nella pagina anche il testo non riesce a starci dentro container? magari il cliente inserisce tanto testo e immagini e di conseguenza area dopo un pò finisce, e se anche il footer è bello alto diventa un problema.
Non mi torna il senso pratico di strutturare così la pagina (forse son troppo vecchio stampo lo ripeto).
Se il testo é lungo, semplicemente lo sticky footer non viene attivato. Non ce ne sarebbe bisogno perché il footer si troverebbe giá in fondo alla pagina, spinto dai contenuti.
Il testo resta sempre dentro #container, non ha altezza fissa, quindi cambia in base al contenuto.
Nel caso invece che il testo sia corto, il footer viene spostato in basso, nessuna scrollbar viene creata e siamo tutti contenti ;)
Il primo metodo, che tra l’altro uso, va benissimo tranne che in Firefox 24.0 dove se si inserisce anche il tasto “plusone” Google+, si presentano dei problemi … ma solo in Firefox e solo col primo metodo !
Risolto !
Un errore banale nel CSS …
Si, quel pulsante spesso da problemi, ma non solo lui, anche gli altri dei social non sono tanto gestibili.
Sperando di non dire una cavolta, dato che magari c’è da qualche parte, per questo genere di articoli/tutorial(ben fatto tra l’altro!) bisognerebbe sempre e comunque mettere un mega pulsantone “Demo” che faccia vedere il risultato finale.
Spesso la gente trova articoli di questo tipo cercando qualcosa per il sito che sta sviluppando e quando non c’è una demo tanti(me incluso) saltano l’articolo senza nemmeno guardarlo.
Non è per pigrizia ma per il semplice fatto che con lo stesso nome ci possono essere mille risultati diversi.
Per il resto ancora complimenti per il lavoro!
Interessante soluzione, che più volte mi ha fatto scervellare, grazie.
@daghene è vero che manca la demo ma utilizzando uno dei tanti servizi online come jsfiddle puoi testare velocemente le due soluzioni facendo due copia e incolla, eccoti la prima http://jsfiddle.net/alftre/CGsJV/3/
Prego! :)
mi sono costruito il mio sito con wordpress. certo che costruito con wordpress, evidentemente ad un grafico fa venire il voltastomaco eheheh, ma non sono esperto e non ho tanti fondi a disposizione.
vorrei chiedere però come fare a togliere quel link nel footer del mio sito, in quanto me l’ ha messo un amico che però non è il creatore del sito stesso.
grazie in anticipo
Ciao Nicola,
e se invece avessi una struttura di questo tipo ?
HEADER
CONTENT
FOOTER
come potrei fare per ottenere lo stesso risultato?
Grazie,
Antonio.
Ciao,
é uguale. Solo che devi modificare il codice per lavorare sull’id del div CONTENT invece che sul container dell’esempio.
Innanzitutto grazie mille però ho un problema (uso il primo metodo) se apro la pagina con chrome mi viene il footer troppo in basso… mi appare la barra di scorrimento verticale. Qualcuno sa aiutarmi?
Ciao, usi WordPress per caso?
Nicola Mustone: non uso wordpress ma penso sinceramente che sia un problema di chrome perche me lo posiziona un paio di righe più in basso solo con questo broswer…
Ciao a tutti.. Intanto grazie a Nicola per l’articolo.
Volevo semplicemente condividere anche il mio metodo di “footer fisso”, molto semplice e veloce:
HTML:
dichiaro ovunque voglio il mio
CSS:
applico queste proprietà al div appena realizzato
#footer{
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 40px;
background: #c69c6d;
float: left;
}
Saluti,
D.