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ì:

#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:

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



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Graziano
Hai qualche domanda da fare?