Il problema del footer...

[ivanisevic82]

Ciao ragazzi, ho bisogno di aiuto.
Nelle ottime guide di html.it viene affrontato il problema del footer, per layout come QUESTO (la cui lunghezza si estende per tutta la pagina) o come QUESTO che è fisso.
In relazione al footer spiegano QUI come avere il footer sempre in fondo alla pagina, attraverso l'espediente del "min-eight".

Io mi trovo davanti a un problema differente: il mio sito è "misto", la colonna centrale è fissa, ma il footer si estende il larghezza al 100%.

A causa di ciò non posso tenere il footer dentro il container, ma l'ho dovuto mettere fuori (se no sarebbe stato di 960px e non al 100% della larghezza.

<div id="ContainerTotale">
<div id="Container">
<div id="header"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
</div>

Ora, se posizione il footer in maniera assoluta,

#ContainerTotale{
position: relative; 
height:100%;
}

body>#ContainerTotale{
height: auto; 
min-height:100%;
}

#footer{
position:absolute;
bottom: 0;
width: 100%
}

mi ritrovo una visualizzazione corretta quando il contenuto della colonna non supera l'altezza del monitor (insomma quando non c'è da "sclorrare"):

Ma se il contenuto è superiore (e c'è da scrollare) dopo lo scrolling mi ritrovo con footer fisso, sovrapporto al contenuto:


Se invece posizione il footer relativamente, va tutto bene quando il contenuto prende tutta la pagina (e c'è da scrollare):

Ma se il contenuto è inferiore, il footer non sta attaccato al fondo, ma immediatamente dopo il contenuto (essendo un footer relativo, è ovvio!)



Mentre io vorrei che in questo caso la situazione fosse come sotto illustrato:



Potete darmi una mano?

Grazie!

[jubstuff]

Puoi provare questo CSS sticky footer

[ivanisevic82]

Ti ringrazio per il link che è utilissimo!

In ogni caso ho risolto un paio d'ore fa, puoi dare un occhiata qui se vuoi...
LINK

Se vedi qualche errore madornale fammi sapere, a me sembra funzionare!

Grazie ancora!