HTML CSS footer: Come posizionarlo al bottom di una Pagina Web

gennaio 28, 2014
Share on Facebook8Tweet about this on Twitter29Pin on Pinterest1Share on Google+3
Questo è un guest post scritto da Stefano Vollono, co-fondatore insieme ad Antonio Polese del blog Laboratorio CSS. Stefano spiega come ottenere una background image full screen su un documento. L’obiettivo è quello di posizionare un elemento HTML CSS footer al bottom del documento di una Pagina Web.

HTML-CSS-Footer-bottom-pagina-web
I Wireframe

Oggi voglio parlarti di come realizzare un template che abbia il footer sempre posizionato in fondo alla pagina, sia nel caso in cui i contneuti sono talmente pochi da non generare alcuna scrollbar, sia nel caso in cui sono gli stessi contenuti a spingere verso il basso il footer. Il seguente wireframe, realizzato con Mockups, può aiutarti a capire meglio il tutto:

Wireframe footer pagina web

 

La parte html

La parte html è relativamente semplice:

 

La parte CSS

Il concetto si basa sul fatto che il footer deve essere per forza posizionato in absolute, affinchè risulti sempre allineato al bottom in relazione al suo contenitore (div#container), deve avere un altezza ben definita e infine affinchè i contenuti non si sovrappongano ad esso il DIV che lo precede, nel nostro esempio il div#content, deve avere necessariamente un padding inferiore pari all’altezza del div#footer. Tradotto nel linguaggio CSS suona più o meno così:

HTML CSS Footer: diverse tecniche, identico risultato

HTML-CSS-Footer-bottom-pagina-web

Spero possa esservi stato utile e lascio a voi ovviamente come sempre la totale personalizzazione dello scheletro per far in modo che si adatti a tutte le vostre esigenze grafiche, ma soprattutto se consocete altre tecniche per realizzare quanto descritto sopra ben venga! Aggiorneremo l’articolo con i vostri commenti e suggerimenti.

NB: L’esempio in allegato ha poco testo. Per provare, aggiungetene altro con firebug fino a toccare il footer.

Hey! Sto scrivendo un e-book su come aumentare le performance e la fluidità per le tue HTML mobile app! Segui i consigli e le tecniche di cui mi sono servito per creare le mie applicazioni (come Tint, Dieta SI o NO?).
Iscriviti alla newsletter per sapere quando sarà pronto!
HTML-mobile-accelerato-ebook-cover

HTML Mobile Accelerato (E-book)

Lascia la tua email per ricevere aggiornamenti e sapere quando sarà disponibile

Giacomo Freddi

Web Designer Freelance e Developer, si occupa del design e dello sviluppo di applicazioni web dal 2008, come molti freelance è abituato a gestire più ruoli e spaziare su più campi, ma la sua passione principale è quella della creazione di interfacce front-end e back-end utilizzando codice html5 e css3. Adora usare pattern MVC per i suoi Javascript.

Tags:

x

Vuoi realizzare HTML Mobile Apps?

Hey! Hai già visto alcune delle mie app? Se vuoi imparare a realizzare una mobile app in HTML ti potrebbe interessare HTML Mobile Accelerato , l'e-book che sto scrivendo sull'argomento: E-book | HTML Mobile Accelerato