Creare footer con i CSS

Il footer è un elemento della pagina web, quello che si trova in fondo alla pagina e che è utilizzato per contenere informazioni utili, banner pubblicitari e quant’altro.

Esistono sostanzialmente due tipi di footer: il primo è quello che si trova in fondo a tutti i contenuti e che non sempre è visibile, alle volte i contenuti sono più lunghi della finestra del browser e per vederlo occorre scorrere la pagina verso il basso; il secondo tipo di footer è “fixato”, cioè si trova ad un livello superiore rispetto a tutti gli altri elementi della pagina e si trova sempre in fondo alla finestra del browser. Ciò significa che in ogni momento, sia che scrolliamo la pagina verso l’alto che verso il basso, il footer sarà sempre fermo lì.

FOOTER 1

Esempio 1

Per realizzarlo dividiamo la pagina in tre sezioni: un header, un contenitore prencipale e il nostro footer.

HTML

 
<section id="main">
         ** contenuto **
         <section id="pre_footer"></section>
</section>
<footer></footer>
 

Assegniamo al contenitore principale altezza e larghezza, io ho usato le percentuali per rendere responsive la pagina, cioè adattabile a tutte le risoluzioni; Quello che ci deve interessare è però la gestione delle altezze: il body deve avere una altezza del 100%, il contenuto principale una altezza minima  del 100% e il footer una altezza definita. Quest’ultima deve essere necessariamente uguale a quella del pre_footer.

A questo punto la domanda nasce spontanea..

Cos’è il pre_footer?

Possiamo definire il pre_footer come l’area della pagina che sarà riservata al footer, infatti avrà le sue stesse dimensioni. Se non mettessimo questo elemento, il footer andrebbe a sovrapporsi al contenuto principale, dal momento che gli abbiamo dato altezza minima 100%.

Il pre_footer serve appunto per riservare un’area al footer.

CSS

 
body, html
 
{
    height: 100%;
}
#main
{
    width: 80%;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -100px;
}
#pre_footer
{
    height:100px;
    width: 100%;
}
footer
{
    width: 80%;
    height: 100px;
    margin-left: auto;
    margin-right: auto;
}
 

FOOTER 2

Esempio 2

HTML

 
<section id="main">
    <article>
    </article>
    <section id="pre_footer"></section>
</section>
<footer></footer>
 

La struttura è identica a quella precedente, l’ho riportata solo per una questione di chiarezza. La differenza è tutta nel CSS.

Il footer si estenderà per tutta la larghezza della finestra quindi è importante eliminare padding e margini dal body. Il resto è praticamente identico eccetto il posizionamento del footer: questo dovrà essere fixed , cioè fermo, sul lato inferiore della finestra, quindi bottom:0.

Avendolo impostato a fixed, non sarà più possibile posizionarlo al centro con il classico margin: 0 auto; ma dovremo assegnare un preciso valore di left: essendo la larghezza dell’80% è evidente che left sarà pari al 10%.  (100-80)/2 = 10.

CSS

 
body, html
 
{
            height: 100%;
            padding: 0;
            margin: 0;
}
#main
{
width: 80%;
            min-height: 100%;
            height: auto !important;
            height: 100%;
margin: 0 auto;
}
#pre_footer
{
            height:100px;
            width: 100%;
}
footer
{
            width: 80%;
            height: 100px;
            position: fixed;
            bottom: 0;
            left: 10%;
}