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:

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>
L'elemento con id pageBase è l'elemento "push". Il margin-bottom dell'elemento pageMain è impostato uguale all'altezza di pageBase e pageFooter.

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à!