Viva l’Ucraina! No alla guerra!
RSS del blog
Penso che tenda al cento percento la quantità dei front-end developer che hanno dovuto affrontare almeno una volta nella vita il problema del footer «disubbidiente» che non vuole stare in fondo alla pagina. Infatti, il problema si presenta ogni qualvolta che si costruisce una pagina con pochi contenuti o addirittura vuota. Quindi nel presente paragrafo vi racconto della mia soluzione preferita del problema (i codici del risultato finale sono in fondo all’articolo).
In totale sono cinque passaggi:
1. Separiamo il footer dal resto del codice e lo mettiamo al di fuori del contenitore generale wrapper.
2. Nel file dei stili CSS impostiamo l’altezza (height) del 100% per il html e per il body. In questo modo il html e il body verranno estesi per l’intera altezza dello schermo.
3. Assegnamo al contenitore generale wrapper i seguenti parametri:
– min-height: 100%; – l’altezza minima del wrapper (è necessario farlo per i browser moderni, anche se i browser IE fino alla versione 7 non sanno interpretare il min-height);
– height: auto !important; – tale impostazione della altezza serve per le situazioni in cui i contenuti della pagina necessitano più di una schermata. In questo modo il div del content si estenderà verso il basso finché la quantità dei contenuti lo richiederà;
– height: 100%; – questa impostazione serve ai vecchi browser IE.
4. Per il div content impostiamo il padding inferiore pari a 100 px – esso serve per «ospitare» il footer. Tra poco capirete il senso di tale operazione. Ora invece devo precisare che il suddetto valore del padding deve essere pari alla altezza (height) del footer, quindi al posto del 100 potete mettere il vostro valore.
5. Ora abbiamo l’altezza della pagina pari a 100% + 100 px. I 100 pixel di troppo vengono eliminati nel seguente modo: nel file dei stili CSS per il footer impostiamo il margine superiore negativo di stessa quantità di pixel della altezza del footer (e del valore del padding impostato al punto 4). Quindi per il footer scriviamo height: 100 px; margin-top: −100 px; Inoltre, ci serve la caratteristica del footer position: relative; Con l’aiuto del margine negativo il footer si sposta completamente sull’area inferiore del wrapper (che occupa il 100% dello schermo) lasciata libera dei contenuti tramite l’impostazione del padding di cui al punto 4. Qualora i contenuti della pagina fossero superiori alla altezza dello schermo, il footer si vedrà solamente al completo scrolling della pagina fino in fondo.
Con l’utilizzo di questo metodo il footer sarà sempre in fondo alla pagina: anche qualora quest’ultima fosse completamente vuota.
Una rappresentazione schematica di quello che abbiamo fatto:
Ecco il codice CSS:
html {
height: 100%;
}
header, nav, section, article, aside, footer {
display: block;
}
body {
height: 100%;
}
#wrapper {
width: 1000px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
}
#header {
height: 150px;
}
#content {
padding: 0 0 100px;
height:400px;
}
#footer {
width: 1000px;
margin: -100px auto 0;
height: 100px;
position: relative;
}
E la parte finale del codice HTML del file index.php:
</div> <!-- end content --> </div> <!-- end main div --> </div> <!-- end wrapper div -->
L’unica modifica da fare al file footer.php è quella di togliere il tag </div> che chiude il div wrapper.
Immagino che ad alcuni miei lettori potrebbe non piacere l’idea di avere il footer sempre e in ogni caso fuori dalla prima schermata del browser. Per correggere questo «difetto» potremmo fare in questo modo: portare sempre il footer fuori dal div wrapper e poi assegnare a quest’ultimo l’altezza con il metodo calc(100% – 100px). Questo metodo è però pericoloso: alcuni browser sanno interpretare il calc() solo nelle loro versioni più recenti.
Spero che questo paragrafo vi sia stato utile.
