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; }
- Articolo precedente Zoom con CSS su immagini per ingrandire dettagli senza Javascript
- Articolo successivo Andare a capo: gestione testo con CSS3 e word-wrap