Salve a tutti,
sto cercando di inserire un footer sticky nel mio sito.
Ho usato una delle tante tecniche trovate on line (di cui si parla anche su questo sito) e funziona tutto bene. Poi ho voluto fare una modifica che mi ha portato a un comportamento inaspettato.
La struttura del sito è questa:
L'elemento con id pageBase è l'elemento "push". Il margin-bottom dell'elemento pageMain è impostato uguale all'altezza di pageBase e pageFooter.codice HTML:<body> <div id=pageMain'> <header> <div id='pageHeader'></div> </header> <div id='pageBody'> <section></section> </div> <div id='pageBase'</div> </div> <footer> <div id='pageFooter'></div> </footer> </body>
Funziona tutto se ho lo stesso colore di sfondo per pageBody e pageMain ma se volessi cambiare questi colori (volevo mettere un'immagine come sfondo di pageMain) se il contenuto del pageBody è breve, il div non occupa il 100% dell'altezza anche se ho impostato height:100% facendo intravedere lo sfondo di pageMain.
Per intenderci io questo sfondo voglio che si veda solo ai lati di pageBody e non sopra e sotto.
C'è un modo per ingrandire questo elemento oppure si adatta solo al contenuto?
Ho provato con min-height ma non funziona.
Grazie a chi mi risponderà!
Rispondi quotando
