Paolo De Feo
a- a+

CSS3 footer fisso: creare un box a fondo pagina

Vediamo come realizzare un fixed footer (footer box fisso) con CSS3. Esempio e codice.

In questo tutorial vedremo come realizzare un fixed footer (footer box fisso) con l’ausilio dei fogli di stile CSS3. Questa operazione è davvero semplice e non richiede competenze avanzate. Il suo utilizzo può essere utile per le realizzazioni più svariate: menu di navigazione, elenchi di link distinti dal contenuto principale ed altro.

Il CSS3

Il nostro markup CSS3 appare grossomodo così:

1.#footer {min-width:770px;width: 100%;position: fixed;z-index: 5;bottom: 0px;}

Con un semplice snippet di codice fisseremo il nostro footer a piè di pagina. Possiamo decidere le dimensioni più disparate: a tutta pagina, adattato al menu eccetera.

Possiamo però creare un foglio di stile CSS più elaborato che includa nel nostro footer più regole di formattazione:

1.div#footer{  position:absolute;  bottom:0;  left:0;  width:100%;  height: // definisci il valore “height” (altezza); } @media screen{  body>div#footer{   position: fixed;  }